html`<mark>`

<mark>以语义方式突出显示部分文本

html 复制代码
<section>
  <h2>Default Style</h2>
  <p>Here, the <mark>searched term</mark> is highlighted.
</section>
<section>
  <h2>Custom Style</h2>
  <p>Here, the <mark class="styled">searched term</mark> is highlighted.
</section>
css 复制代码
body {
  padding: 16px;
  background-color: black;
  color: #fff;
}

section {
  margin-bottom: 64px;
}

h2 {
  color: #9b8ee1;
}

mark.styled{
  background-color: transparent;
/*   color: red;  */
  color: yellow;
}

See the Pen html`<mark>` by liu874396180 ( @liu874396180) on CodePen.

相关推荐
soda_yo1 分钟前
React哲学:保持组件纯粹 哈气就要哈得纯粹
前端·react.js·设计
Bigger3 分钟前
Tauri (22)——让 `Esc` 快捷键一层层退出的分层关闭方案
前端·react.js·app
大猫会长3 分钟前
react中用css加载背景图的2种情况
开发语言·前端·javascript
子春一26 分钟前
Flutter 2025 可访问性(Accessibility)工程体系:从合规达标到包容设计,打造人人可用的无障碍应用
javascript·flutter·microsoft
专业IT有讠果9 分钟前
[Docker/K8S] Kubernetes故障克星:19个高频问题速查与秒解指南(2025版)
javascript·面试
编程修仙9 分钟前
第一篇 VUE3的介绍以及搭建自己的VUE项目
前端·javascript·vue.js
search710 分钟前
前端学习13:存储器
前端·学习
web Rookie11 分钟前
前端开发中常见的图片格式及使用场景
javascript·css3
星月心城13 分钟前
八股文-JavaScript(第一天)
开发语言·前端·javascript
政采云技术15 分钟前
深入理解 Webpack5:从打包到热更新原理
前端·webpack