-1

I want to get a css effect like a highlighter

Example of highlighter

I found some answers like Pen highlighter effect in css. But how could I get this highlighter effect in smaller as you can see in the example ?

2 Answers2

1

I would use an ::after pseudo element to do the highlight. Here is an example:

.highlight {
  position: relative;
}


.highlight::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 6px;
  background-color: #9bffb0a6;
  z-index: -1;
  
  
}
<div><span class="highlight">Cloud Native</span>: Cloud Training, Cloud Development, Cloud Architecture, Cloud Assesment....</div>

Just the .highlight class for any text you want to highlight.

joshua miller
  • 1,686
  • 1
  • 13
  • 22
  • Of course you can change the background-color to change highlight color, and the height property to change how high the highlight is. – joshua miller Nov 01 '20 at 09:41
  • I have another issue - I would like to make the green darker when the link is hovered. Do you have an idea? –  Nov 01 '20 at 18:14
  • 1
    You can do something like: .highlight:hover::after { background-color: #63b574ad; } – joshua miller Nov 01 '20 at 21:00
-1

You can do it like this

.underline span {
 display: inline-block;
 background-position-y: -0%;
 background-image: linear-gradient( transparent 50%, #0095ff 50%);
 transition: background .3s ease;
 background-size: 2px;
 background-size: auto 175%;
 text-decoration: none;
 font-weight: 600;
}
<p class="underline">
  This sentence has <span>Highlighted Text</span> in the middle.
</p>
Hasitha Prageeth
  • 658
  • 6
  • 6