在 CSS 中使用 text-emphasis 来增强文本的趣味性

开发 前端
文本强调(text-emphasis​),是 text-emphasis-* 属性组合的简称,可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本,例如在文本上方或下方添加点、圆、双圆或文本。

在CSS中设置文本样式的方法有很多。您可以更改颜色、大小、字体,甚至添加阴影和轮廓等效果。但最近,我了解到一个我以前没有听说过的时尚 CSS 属性,它非常棒!

它被称为文本强调(text-emphasis),是 text-emphasis-* 属性组合的简称,可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本,例如在文本上方或下方添加点、圆、双圆或文本。

下面是一个示例,说明如何使用 text-emphasis 点添加到文本中:

.text-emphasis-dot {
    text-emphasis: dot;
}

这将在文本顶部添加一个点,如下所示。

图片图片

还可以使用如下 text-emphasis 属性向文本添加双圆:

.text-emphasis-double-circle {
    text-emphasis: double-circle;
}

这是它的样子。

图片图片

您也可以使用字母来强调文本。例如,您可以使用 $ 在文本下方添加美元符号,如下所示:

.text-emphasis-dollar {
    text-emphasis: '$' lime;
    text-emphasis-position: under;
}

该 text-emphasis-position 属性用于指定强调标记的位置。可以使用 over 、 under 、 right 或 left 来定位强调标记。

这是它的样子。

图片图片

哎呀!您甚至可以使用表情符号来强调文本。例如,您可以使用 🔥 在文本中添加火表情符号,如下所示:

.text-emphasis-fire {
    text-emphasis: '🔥';
}

这是它的样子。

图片图片

我认为该 text-emphasis 属性是一种有趣的方式,可以增加对文本的强调,并可用于为您的设计增添趣味。大多数现代浏览器都支持它,因此您可以立即开始使用它来使您的文本脱颖而出!

原文:https://www.amitmerchant.com/spicing-up-text-with-text-emphasis-in-css

责任编辑:武晓燕 来源: 独立开发者张张
相关推荐

2010-03-29 09:58:44

Java

2019-11-08 14:14:43

数据库机器学习算法

2022-08-18 17:07:00

sopsGitOps

2021-03-05 18:02:31

VRAR

2022-07-25 10:07:26

Python可视化技巧

2023-05-08 06:22:04

ChatGPTAlexa语音助手

2015-09-01 10:32:11

2015-09-01 14:29:33

2021-07-29 10:00:43

XMLXMLStarletLinux

2022-05-03 09:59:43

网络钓鱼数据集机器学习

2024-02-04 00:00:00

Go货币接口

2020-11-08 14:36:27

pandas数据分析pipe()

2022-12-25 13:46:37

生成器

2022-11-25 09:16:43

Linux命令

2023-12-28 09:00:00

数字货币安全加密货币

2022-08-11 11:35:43

Vuev-model​表单

2010-09-09 10:23:23

DIVCSS垂直居中

2010-01-08 12:11:04

ibmdwWeb

2011-08-02 09:49:10

CSS

2018-05-21 14:44:33

LinuxshellPython
点赞
收藏

51CTO技术栈公众号