html突出显示,html – 使用CSS突出显示标记

我能想到一个解决方案,但需要对DOM进行轻微修改.解决方案是将链接文本包装在< span>内.元素,然后我们将使用旋转的矩形代替三角形的边框.但是,由于背景必须在z-index中高于旋转的矩形,因此需要嵌套(因此我们在< span>元素上声明蓝色背景.

由于只有两个伪元素可能,并且您已经同时使用:: before和:: after作为样式目的,我们只能使用额外的嵌套级别：

InsertHTML

InsertHTML

InsertHTML

对于CSS(注意：您可能希望将供应商前缀添加到CSS转换属性)：

.tag {

font-family: Helvetica, Arial, sans-serif;

display: inline-block;

color: #fff;

position: relative;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

margin: 0 30px 0 0;

text-decoration: none;

}

/* The rotated square */

.tag::after {

background-color: #588fe5;

display: block;

height: 27px;

width: 27px;

position: absolute;

top: 6px;

right: -13px;

content: "";

transform: rotate(45deg);

z-index: 1;

}

/* Nested span */

.tag > span {

display: inline-block;

background-color: #588fe5;

position: relative;

padding: 10px;

z-index: 2;

}

/* The white dot */

.tag > span::before {

background: #fff;

width: 10px;

height: 10px;

content: "";

display: inline-block;

border-radius: 20px;

margin: 0 5px 0 0;

}

/* Hover effects */

.tag:hover::after, .tag:hover > span {

background-color: #739fe4;

}

/* Active tag */

.tag.active, .tag.active::after {

box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6);

}