美文网首页前端开发那些事儿
伪类/伪元素的content与attr

伪类/伪元素的content与attr

作者: 李霖弢 | 来源:发表于2021-03-12 10:53 被阅读0次

content属性用于通过CSS向:before:after里填写内容

  • 带引号的文本 content:"hello world";
  • attr属性获取元素属性内容
<div data-line="1"></div>

div:after { 
    content: attr(data-line); /* 属性名不需要加引号 */
}
  • 组合使用
<div data-line="1"></div>

div[data-line]:after { 
    content: "[line " attr(data-line) "]"; 
}

相关文章

  • 伪类/伪元素的content与attr

    content属性用于通过CSS向:before、:after里填写内容 带引号的文本 content:"hell...

  • css样式 复习笔记

    伪类元素 其他属性 attr()用于获取选择到的元素的某一个html属性,并用于样式,可以用于伪元素,属性值采用伪...

  • CSS伪类和伪元素

    1. 什么是伪类和伪元素1.1. 伪类1.2. 伪元素1.3. 伪类与伪元素的区别 2. 使用 1. 什么是伪类和...

  • 伪元素与伪类的区别

    CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义w...

  • css伪类及伪元素

    CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义w...

  • 细说CSS伪类和伪元素

    原文 博客原文 大纲 1、伪元素2、伪类元素3、伪元素和伪类元素的区别4、伪类和伪元素的使用 1、伪元素 伪元素在...

  • 伪元素初解

    一、伪元素与伪类 1. 常见的伪类 2. 伪元素 二、伪元素(这里只说::before和::after) 1. 了...

  • CSS

    伪类的语法: CSS 类也可与伪类搭配使用。 伪元素

  • part2: CSS基础-练习

    CSS全称: cascading style sheets 谈谈css伪类与伪元素 这是我见过最全的伪类和伪元素总...

  • css伪类和伪元素区别

    伪类与伪元素 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中...

网友评论

    本文标题:伪类/伪元素的content与attr

    本文链接:https://www.haomeiwen.com/subject/kezaqltx.html