使用 :after伪元素撑开 div

使用 :after伪元素撑开 div，

<html>
<head><style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>
</head>
<body>
    <div class="clearfix" style="padding:1px 1px 1px 1px; border: 1px solid red; width:200px;">
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
        <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    </div>
</body>
</html>

TEST DIV

TEST DIV

TEST DIV

时间： 2024-10-22 12:16:40

使用 :after伪元素撑开 div的相关文章

伪元素

原文出处: Thoriq Firdaus   译文出处:听海阁(@听海JamiE) 层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是"伪元素". 你一定听说过这个词,尤其是当你一直关注着我们的教程.点此浏览原作者的其他文章 事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::

一句话让你明白伪元素和伪类的区别

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到. 下面就这句话给出例子 伪类 :first-child <div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div> 使用伪类选出第一个段落 div p:first-ch

深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法 需求说明 [1]为id=box的div元素添加content="前缀"的:before伪元素 [2]为已经添加:before伪元素的div元素删除伪元素  [注意]由于IE7-浏览

理解伪元素 :before 和 :after

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定听说过这个词,尤其是当你一直关注着我们的教程.点此浏览原作者的其他文章 事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::selection, :before and :after.但是,就本文而言,我们将把我们探讨

css---6伪元素选择器

after                   :在内容后边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>after</title> <style type="text/css"> div { width: 300px; height: 100px; border: 1

大放异彩的伪元素——可以做什么？(转)别人分享的文章，发现很不错，果断收藏了

伪元素:before 和 :after可以做的东西是相当惊人的.对于页面上的每一个元素,你拥有了两个更灵活的.而且可以完成其它HTML元素都能完成的东西的元素.它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响.这里有一大堆关于这些有趣的效果的示例,你想看的话就接着往下看吧. 多重背景画布 因为你可以将伪元素相对于它们的父类元素绝对定位,你可以想象成每个元素都有两个额外的层.Nicolas Gallagher向我们展示了它的很多种应用,包括多边界.模拟CSS3多重背景.等高栏等.

flex和伪元素

我在测试的时候发现伪元素把我内容撑开了,发现加上flex-wrap 就可以解决 <div> <ul> <li><p>科室:</p><span>感染科</span></li> <li><p>病种:</p><span>中枢性神经系统感染 中枢性神经系统感染中枢性神经系统感染中枢性神经系统感染中枢性神经系统感染 中枢性神经系统感染中枢性神经系统感染中枢性神经系统感染 中

css伪元素before/after和画三角形的搭配应用

想要实现的效果如下: 第一步:如何用css画出三角形? 1 /* css画三角形 */ 2 .sanjiao{ 3 width:0; 4 border-top:40px solid red; 5 border-bottom:40px solid green; 6 border-left:40px solid blue; 7 border-right:40px solid yellow; 8 } 9 10 <div class="sanjiao"> 11 </div&g

CSS伪元素before和after

今天发现很多国外的网站和框架设计都用到了before和after,之前使用的比较少,今天试了下觉得还是很有意思的~ 说明 1. :before 和 :after将在内容元素的前后插入额外的元素::before将会在内容之前"添加"一个元素而:after将会在内容后"添加"一个元素.在它们之中添加内容我们可以使用content属性. 2. :before 和 :after发布于CSS2.1, 在css3中修订后伪元素使用::,伪类使用:, 因而形式为:: before