注册
web

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

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


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


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


image.png


官网解释


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

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


image.png


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


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


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


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

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


image.png


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


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);
}
}

emi9g-9z6zo.gif


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


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


作者:李剑一
来源:juejin.cn/post/7516745491104481315

0 个评论

要回复文章请先登录注册