Text underline on hover pure css

Question

I'm trying to use purely CSS to underline my text with a gradient from the center when a user hovers over it.

It's working but for some reason the underline appears at the bottom of the document rather than on each line of text and I can't figure out why this is happening.

Any pointers would be appreciated.

.title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 1em;
    text-transform: uppercase;
}

.title:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: inline;
    height: 5px;
    left: 50%;
    position: absolute;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.title:hover:after { 
    width: 100%; 
    left: 0; 
}

<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

<p class="title" onclick="location.href='1'">Hover to underline</p>
<p class="title" onclick="location.href='2'">Hover to underline</p>
<p class="title" onclick="location.href='3'">Hover to underline</p>
<p class="title" onclick="location.href='4'">Hover to underline</p>

score 5 · Accepted Answer · answered May 23 '20 at 22:06

5

Apply position: relative to .title. Otherwise the position is calculated with the document.

.title {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 1em;
    text-transform: uppercase;
}

.title:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: inline;
    height: 5px;
    left: 50%;
    position: absolute;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.title:hover:after { 
    width: 100%; 
    left: 0; 
}

<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

<p class="title" onclick="location.href='1'">Hover to underline</p>
<p class="title" onclick="location.href='2'">Hover to underline</p>
<p class="title" onclick="location.href='3'">Hover to underline</p>
<p class="title" onclick="location.href='4'">Hover to underline</p>

answered May 23 '20 at 22:06

Hans Felix Ramos

4,264
3
16
40

One more issue, the underline isn't the width of the text, how would this be fixed? – learningtoanimate May 23 '20 at 22:10
1

@learningtoanimate add `display:inline-block` to `.title` – Rainbow May 23 '20 at 22:12
`display: inline-block` will set the width to the content. – Hans Felix Ramos May 23 '20 at 22:15
That works but then the paragraphs aren't all on their own lines. I could add a breaker but is there a more efficient way @ZohirSalak, @HansFelixRamos? – learningtoanimate May 23 '20 at 22:16
1

@learningtoanimate `display:table` instead – Temani Afif May 23 '20 at 22:18
@TemaniAfif good idea! – Hans Felix Ramos May 23 '20 at 22:19
That worked but ignored my alignment rules on the text elements. Breakers seem to work best. – learningtoanimate May 23 '20 at 22:24

Text underline on hover pure css

1 Answers1