1. 使用伪元素
我们可以使用伪元素::before或::after来创建一个与文本内容相同的元素，然后给这个元素添加下划线和加粗样式。这种方法的优点是兼容性好，可以在任何支持CSS3的浏览器中使用。
以下是一个简单的示例：
p {
position: relative;
}
p::before {
content: attr(data-content);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 2px;
font-weight: bold;
}在这个示例中，我们首先将p元素的定位设置为relative，然后使用::before伪元素来创建一个与文本内容相同的元素。我们使用attr(data-content)来获取文本内容，然后给这个元素添加下划线和加粗样式。
这种方法的缺点是需要为每个需要加粗下划线的元素添加额外的HTML结构。例如，如果我们有一个普通的段落，我们需要将其转换为：
<p data-content="这是一段普通的文本。">这是一段普通的文本。</p>2. 使用transform属性
另一种方法是使用transform属性来旋转一个与文本内容相同的元素，然后给这个元素添加下划线和加粗样式。这种方法的优点是可以保持原有的HTML结构，不需要添加额外的HTML结构。但是，这种方法的缺点是兼容性较差，只能在支持CSS3的浏览器中使用。
以下是一个简单的示例：
p {
position: relative;
}
p span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(90deg);
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 2px;
font-weight: bold;
}在这个示例中，我们首先将p元素的定位设置为relative，然后使用一个span元素来创建一个与文本内容相同的元素。我们使用rotate(90deg)来旋转这个元素，使其垂直显示。然后给这个元素添加下划线和加粗样式。
这种方法的缺点是旋转的元素可能会遮挡住其他元素，需要进行额外的布局调整。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/129908.html
微信扫一扫 