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.

相关推荐
流浪码农~几秒前
Element Plus DatePicker 动态设置每周起始日
前端·vue.js·elementui
jason_yang3 分钟前
刚发版就背锅?前端版本控制就靠他version-rocket
前端
如果超人不会飞7 分钟前
TinyVue NavMenu导航菜单组件使用指南
前端·vue.js
Jason_chen8 分钟前
Linux 3.0 串口机制深度解析:传统8250驱动与基础RS-232/485支持
linux·前端
TPBoreas11 分钟前
前端面试问题打靶
前端
赵庆明老师12 分钟前
JS检查提交的文件是否合规
开发语言·前端·javascript
禅思院18 分钟前
前端请求取消与调度完全指南:从 AbortController 到企业级优先级架构
前端·设计模式·前端框架
颂love27 分钟前
Vue的两大生态以及组件通信
前端·javascript·vue.js·typescript
甜汤圆30 分钟前
Python 里**自定义数据单元**
前端
cidy_9837 分钟前
将 Figma 接入 Codex MCP:从 `/plugins` 到本地插件配置的完整教程
前端