伪类元素before与after

1、selector:before( sRules ) 它要和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容；

2、selector:after( sRules ) 和before用法一样，不过它是设置在对象后（依据对象树的逻辑结构）发生的内容；

<style>

.div{width:350px; border:1px solid #000; line-height:50px; margin:10px;}

.divb{width:500px; border:1px solid #FC0;}
.after,.before,.block{border:1px solid #330;}
.after:after{content:‘我在后面吧‘; color:#F00;}
.before:before{content:‘我在前面吧‘; color:#F00;}
.block:after{content:‘我是块元素，我占一行‘; color:#F00; display:block;}
.block{display:block;}

</style>

<body>

<div class="div">after<span class="after">我是里面的内容</span></div>
  <div class="div">before<span class="before">我是里面的内容</span></div>
  <div class="divb">block<span class="block">我是里面的内容</span></div>

</body>

运行结果如图！我为什么要把<span class="block">转换为块级元素呢？因为块元素插入内联元素不符合标准，不规范，不转化的话显示有问题。我也不清楚.

原文地址：https://www.cnblogs.com/qianphong/p/10386105.html

时间： 2024-10-10 07:04:32

伪类元素before与after的相关文章

关于伪类元素:before和:after

关于伪类元素:before和:after Posted@2011-11-02 3:02 p.m. Categoriescss :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码

用一个例子学习CSS的伪类元素

CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的.而其用法也很简单,和一些伪类一样,如:a:hover, a:active.那么伪元素这里便是 a:before, a:after. 关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的.但是我们可以给

辛星浅析伪类元素before和after

其中:before和:after的作用就是在指定的元素内容(不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素. 最基本的用法如下: #xin:before{ content:"之前的内容"; color:red; } #xin:after{ content:"之后的内容"; color:blue; } 上面的代码会在#xin元素之前之后插入相应的内容,插入的行内元素是作为#xin的子元素. 需要说明的是如果没有content元素,那么伪类元

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史伪元素实际上在CSS1(CSS1

用JS修改伪类/元素的样式

在不能修改HTML和CSS的前提下,如果要用JS修改伪类可以这样做: 原本的代码: <style> li:before{content:"·"} </style> <ul> <li>日曜日</li> <li>月曜日</li> <li>火曜日</li> <li>水曜日</li> <li>木曜日</li> <li>金曜日&l

伪类元素before&after

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box{ 8 height: 200px; 9 background: yellow; 10 } 11 /* before after伪类必须有content属性才能起作用,值字符串 12 * 相当于子标签,行内元素 *

css中伪类元素:before及:after用法浅谈

JS代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } .wrap{ margin-top: 10px; width: 150px; padding: 10px; position: relative; } .wrap span:nth

伪类元素使用

:before 伪元素可以在元素的内容前面插入新内容. 例如在一段文字前面加一个直角三角形 css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;} html是 <h1>Hello world</h1> :after 伪元素可以在元素的内容后面插入新内容. 例如在一段文字后面加一个直角三角形 css是h1:bef

window.getComputedStyle可获取伪类元素样式

window.getComputedStyle详解 window.getComputedStyle说明:getComputedStyle()返回元素的所有CSS属性的计算值语法:var style = window.getComputedStyle(element[, pseudoElt]);参数说明:element:目标元素的DOM对象pseudoElt:指明要匹配的伪元素,对于普通元素必须指定为null(或省略)(or not specified翻译成省略不知道有没有问题,不过测试结果表明对