用CSS创建偏移高亮文本

我试图使用CSS来高亮文本,但要像这个例子一样让高亮偏移。

Offset highlighted text

我通过使用线性渐变和上半部分透明的渐变来实现部分效果。

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

然而,我现在剩下的是这样的:

Output of current code

有什么办法可以让我添加一些东西来实现偏移?

先谢谢你

解决方案:

你可以用伪元素做很多事情。

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>

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/40421.html

(0)
上一篇 20小时前
下一篇 20小时前

相关推荐

发表评论

登录后才能评论