CODEWITHSUNDEEP
css
transit54
transit54

Reputation: 61

CSS to create offset highlighted text

I am attempting to use CSS to highlight text, but to have the highlighting offset as in this example:

Offset highlighted text

I've accomplished this partially by using a linear gradient with the top half of the gradient transparent:

.menu-highlight
{
 background: linear-gradient(180deg,rgba(255,255,255,0) 45%, #FFFFFF 45%) right;
 display: inline;
}

However, what I am left with is this:

Output of current code

Any ideas on what I can add to accomplish the offset?

Thanks in advance!

Upvotes: 1

Views: 1852

Answers (2)

Reza Majidi
Reza Majidi

Reputation: 1190

You can do lots of things with pseudo-elements:

div {
  padding: 12px 36px;
  background-color: #DBDCDE;
}

.beautiful-link {
  font-weight: 1000;
  color: #999A9C;
  position: relative;
  z-index: 0;
  text-decoration: none;
}
.beautiful-link::before {
  background-color: white;
  position: absolute;
  content: "";
  height: 16px;
  width: 100%;
  z-index: -1;
  bottom: 0;
  transform: translate(-8px, 4px);
}
<div>
  <a class="beautiful-link" href="#">BUSINESS</p>  
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272608

Use box-shadow for this:

.box {
  display:inline-block;
  padding:10px 20px 15px;
}

.highlight  {
  box-shadow:0 2px 0 16px inset grey;
}
<div class="box">some text</div>
<div class="box highlight">some text</div>

Upvotes: 0

Related Questions