说个多年老前端都不知道的标签正确玩法——q标签

李剑一2025-06-17 19:01

最近这两天准备鼓捣一下markdown文本编辑器，现在写公众号一般用的都是网页的编辑器。

说实话，很方便，但是痛点也很明显。

研究过程中发现一个以前从未在意过的标签: <q> 标签。

官网解释

html 复制代码

<p>孟子: <q>生于忧患，死于安乐。</q></p>

说实话原生效果比较难看。

仅仅是对文本增加了双引号，并且这个双引号效果在各个浏览器中好像还存在细微的区别。

另外就是效果对于常规文本而言没有什么问题，但是对于大段文字、需要重点突出的文字而言其实比较普通，混杂在海量的文字中间很难分辨出来效果。

所以可以通过css全局修改q标签的样式，使其更符合个性化样式的需求。

css 复制代码

q {
    quotes: "「" "」";
    color: #3594F7;
    font-weight: bold;
}

最大限度模仿了markdown上面的样式效果。

其实上述样式中的双引号还可以被替换成图片、表情、文字等等，并且也可以通过伪元素对双引号进行操作。

css 复制代码

q {
    quotes: "🙂" "🙃";
    color: #3594F7;
    font-weight: bold;
}

q::before {
    display: inline-block;
}

q::after {
    display: inline-block;
}

q:hover::before,
q:hover::after {
    animation: rotate 0.5s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

注意：伪元素上必须添加 display: inline-block; ，否则动画不生效。

原因是伪元素默认为 inline，部分css样式对 inline 是不生效的。