How to create CSS underline which partially covers the word?

Question

This is what I want my styling to look like:

My code currently looks similar to this:

div span {
  border-bottom: 3px solid #5B48D6;
}

<div><span>Uniswap</span><div>

I've tried adding negative padding and margin with no luck. for reference I am using React so I could download library from NPM to accomplish this if vanilla CSS will not do.

@HereticMonkey good find. I was looking for an answer before I posted. My google skills failed me. — disinfor, May 25 '21 at 20:05

disinfor · Accepted Answer · 2021-05-25T19:59:14.170

2

You can use pseudo ::before or ::after elements for this:

body {
  background: black;
}

div span {
  /* This is important so the pseudo element can be place relative to the span element */
  position: relative;
  /* Need to set a z-index so the pseudo element has an index to place against */
  z-index: 1;
  font-size: 25px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}

div span::after {
  position: absolute;
  content: '';
  /* Change the bottom value to move the underline element */
  bottom: 0;
  width: 100%;
  /* change the height to what you want */
  height: 15px;
  background: blue;
  display: block;
  /* move the pseudo element behind the it's span parent */
  z-index: -1;
}

<div>
  <span>Uniswap</span>
</div>

edited May 25 '21 at 19:59

answered May 25 '21 at 19:53

disinfor

10,865
2
33
44

This is working for me, however, I actually have other text in this div, and three elements which have these spans. The absolute position is lining up all of these pseudo elements on the left side instead of over the words. Any ideas? I am toying with it now – Pensive_Knave May 25 '21 at 20:20
1

Ok what I did was I wrapped each span in its own div, so that the background align within that instead of the parent. Thanks so much! – Pensive_Knave May 25 '21 at 20:23

Bee · Answer 2 · 2021-05-25T20:05:11.777

1

Hi I am doing this and it is working perfectly fine. where I am applying this on a tag.

        a:hover::after{
            content: ""; /* This is necessary for the pseudo element to work. */ 
            display: block; /* This will put the pseudo element on its own line. */
            margin: 0 auto; /* This will center the border. */
            width: 50%; /* Change this to whatever width you want. */
            padding-top: 3px; /* This creates some space between the element and the border. */
            border-bottom: 2px solid white; /* This creates the border. Replace black with whatever color you want. */
}

edited May 25 '21 at 20:05

answered May 25 '21 at 19:59

Bee

26
2

1

You may want to read [I've been told to create a “runnable” example with “Stack Snippets”, how do I do that?](https://meta.stackoverflow.com/q/358992/215552) as following the instructions in the answer would help your answer tremendously. – Heretic Monkey May 25 '21 at 20:01

score 1 · Answer 3 · answered May 25 '21 at 20:00

Use background and play with background-position-y

div span {
  font: 24px Arial, sans-serif;
  /*                                               ↓ y position */
  background: linear-gradient(#5B48D6, #5B48D6) 0 90% / 100% 8px no-repeat;
  /*                                                          ↑ line height */
}

<div><span>Uniswap</span><div>

score 1 · Answer 4 · answered May 25 '21 at 20:03

Consider using linear-gradient

.underline {
background: rgb(255,255,255);
background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(21,101,192,1) 55%, rgba(21,101,192,1) 100%);
background-position: bottom;
background-size: 100%;
color: white;
background-repeat: no-repeat;
font-size: 50px;
}


body {
background: #212121;
}

<span class="underline">
Lorem Ipsum
</span>

G-Cyrillus · Answer 5 · 2021-05-25T20:11:45.420

background can help too. for an inline element it will wrap with the text and can be animated through lines.

  div span {
  color: white;
  background: linear-gradient(to top, #5B48D6 0.4em, transparent 0.4em) right  no-repeat;
  /* optionnal*/
  padding: 0 0.2em;
  background-size: 100% 100%;
  transition: 1s
}

div {
  background: #333;
  font-size: 2rem
}

div:hover span {
  background-size: 0% 100%;

<div>
  <span>Uniswap</span>
</div>
<hr>
<div><span>Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap Uniswap </span>
  <div>

How to create CSS underline which partially covers the word?

5 Answers5