css实现着重号

cyf12345678

已于 2025-02-11 10:14:03 修改

阅读量140

点赞数 3

文章标签： css 前端

于 2025-02-11 09:35:43 首次发布

本文链接：https://blog.youkuaiyun.com/cyf12345678/article/details/145564168

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>着重号示例</title>
<style>
/*伪元素法*/
  .emphasis {
    position: relative; /* 为后面的伪元素定位做准备 */
    display: inline-block; /* 使元素成为行内块，以便更好地控制其样式 */
  }

  .emphasis::before {
    content: "·"; /* 使用圆点作为着重号 */
    position: absolute; /* 绝对定位 */
    left: 0.2em; /* 调整着重号的位置，使其出现在文字左侧 */
    top: 0.3em; /* 调整着重号的垂直位置 */
    font-size: 1.5em; /* 调整着重号的大小 */
    color: red; /* 设置着重号的颜色 */
  }
/*使用text-emphasis属性*/
.zhuozhonghao {
    -webkit-text-emphasis: dot red;
    text-emphasis: dot red;/* 与 text-emphasis: "." red; 同效果 */
    -webkit-text-emphasis-position: under;
    text-emphasis-position: under;/* 取值：under，over */
}

</style>
</head>
<body>
<p>这是一个<span class="emphasis">着</span><span class="emphasis">重</span>标记的文字。</p>
<p>这是一个<span class="zhuozhonghao">着重</span>标记的文字。</p>
</body>
</html>

效果：