Small highlighter effect [duplicate]

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.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top