Geek asks and answers

CSS, Text-Decoration: Overline

I am trying to create an overline effect on hover css. What I still have is below. Here the problem that I have above the line appears right above the text. I want some space there. Here is my website: http://baycity2014.weebly.com , and here is the effect I'm going to do: http://www.hartlevin.com . Any tips?

CSS

#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
}

#nav-wrap .container {
    /*background:url(nav-bg-medium.jpg) repeat-x top;*/
    /*height:45px;*/
}

#nav-wrap .container ul {
    list-style: none;
}

#nav-wrap .container ul li {
    list-style: none;
    float: left;
    /* background:url(nav-saperator-medium.jpg) no-repeat right;*/
    padding-right:2px;
}

#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul > li:first-child a:hover,
#nav-wrap .container ul span:first-child li a,
#nav-wrap .container ul span:first-child li a:hover{
    border-radius:5px 0px 0px 5px;
}

#nav-wrap .container ul li a {
    float: left;
    display: block;
    font-family: 'Helvetica', san-serif;
    color: #000;
    padding: 0px 30px;
    border: 0px solid;
    outline: 0;
    list-style-type: none;
    font-size: 16px;
    line-height:45px;
    /*text-shadow: 0px -1px 0px #333333;*/
}

#nav-wrap .container ul li:hover {
    /*background:url(nav-saperator-hover-medium.jpg) no-repeat right;*/
}

#nav-wrap .container ul li a:hover {
    /*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
    color: #145D85;
    text-decoration:overline;
}

HTML:

    <div id="left_content_nav">
    <ul class='wsite-menu-default'>
        <li id='active'><a href='/'>Home</a>

        </li>
        <li id='pg886612977153583720'><a href='/about.html'>About</a>

            <div class='wsite-menu-wrap' style='display:none'>
                <ul class='wsite-menu'>
                    <li id='wsite-nav-226730044254468285'><a href='/blog.html'><span class='wsite-menu-title'>Blog</span></a>

                    </li>
                </ul>
            </div>
        </li>
        <li id='pg336904325932674008'><a href='/practice-areas.html'>Practice Areas</a>

        </li>
        <li id='pg342722679661255807'><a href='/press.html'>Press</a>

        </li>
        <li id='pg204649403653981064'><a href='/contact.html'>Contact</a>

        </li>
    </ul>
</div>
+3
source share
4 answers

You should use border-topinstead overline, with some padding-top, to fill the gap between the line and the top line.

, border-top: 4px solid transparent;, transparent border, , , :hover , CSS Box Box Model counts border , , .

HTML

<ul>
    <li><a href="#">Hello</a></li>
    <li><a href="#">World</a></li>
</ul>

CSS

ul {
    margin: 40px;
}

ul li {
    display: inline-block;
    padding-top: 5px;
    margin-right: 10px;
    border-top: 4px solid transparent;
}

ul li:hover {
    border-top: 4px solid #f00;
}

width :before :after, HTML , .

2

CSS

ul {
    margin: 40px;
}

ul li {
    display: inline-block;
    padding-top: 8px;
    margin-right: 10px;
    position: relative;
}

ul li:after {
    position: absolute;
    width: 90%;
    content: "";
    top: 0;
    left: 50%;
    margin-left: -45%;
}

ul li:hover:after {
    border-top: 4px solid #f00;
}
+5

border-top overline. ,

#nav-wrap .container ul li a:hover {
   /*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
   color: #145D85;
   text-decoration:overline;
}


#nav-wrap .container ul li a {
   border-top:2px solid transparent;
}
#nav-wrap .container ul li a:hover {
   color: #145D85;
   border-top:2px solid #145D85;
}
0
<ul> 
    <li> <a href="#"> Item 1 </a> </li>
    <li> <a href="#"> Item 2 </a> </li>
    <li> <a href="#"> Item 3 </a>
    <ul>
        <li> <a href="#"> Sub Item 1 </a> </li>
        <li> <a href="#"> sub Item 1 </a> </li>
        </ul>
    </li>
</ul>

CSS

body
{
    background:grey;
}
ul li ul
{
    display:none;
}

ul
{
    list-style-type:none;
}

ul li
{
    float:left;
    width:130px;
    margin:0px;
    padding:10px;
    background-color:#003366;
    text-align:center;
   }
ul li a{
    color:white;
    text-decoration:none;
}

ul li:hover
{
    border-top:4px solid white;
    margin-top:-4px;
}
ul li:hover ul
{
    display:block;
   margin-left:-50px;
    margin-top:10px;
}
ul li ul li
{
   background-color:#ffffff;
    height:100%;
    padding:10px;
}
ul li ul li a
{
    color:#003366;

}

fiddle

Conclusion:

enter image description here

0
source

You can place your menu on <span></span>and set the border for this range.

0
source

More articles:


All Articles