JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li><a href="#">Домойfd dfdfdf dfgdf</a></li>
        <li><a href="#">О</a></li>
        <li><a href="#">Контакты</a></li> 
        <li><a href="#">и тд и тп</a></li> 
    </ul>

CSS

ul, li {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
        text-align: justify;
        text-align-last: justify;
        width: 375px;
        border-top: 6px solid #ccc;
    }

    li, ul:after {
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }

    ul a {
        display: inline-block;
        padding: 5px;
        border-top: 6px solid #ccc;
        margin-top: -6px;
    }

    ul a:hover {
        color: red;
        border-top-color: red;
    }

    ul:after {
        width: 100%;
        height: 0;
        content: '';
    }

    /* для IE7 (это лучше вынести в CC, тогда и дублировать не придется) */
    *+html ul { text-justify: newspaper; zoom: 1 }
    *+html li { display: inline; margin: 0; zoom: 1 }

    /* для IE6 (если этот код в CC для lte IE 7, дублировать его не надо) */
    * html ul { text-justify: newspaper; zoom: 1 }
    * html li { display: inline; margin: 0; zoom: 1 }