`

CSS伪元素after、before使用示例(二)

阅读更多
  通过对:after、:before伪元素的控制,可以发挥相像力实现很多效果,如:




  代码如下:


<style type="text/css">
.declare__content{
	border:1px solid #faa85f;
	border-radius:8px;
	position:relative;
	padding:1.5em;
	text-indent:2em;
}
.declare__title{
	position:absolute;
	left:2em;
	top:-12px;
	height:24px;
	line-height:24px;
	background-color:white;
	width:5.5em;
	text-align:center;
	text-indent:0;
}
.declare__title:before,
.declare__title:after{
	content:"";
	position:absolute;
	display:block;
	width:8px;
	height:8px;
	border-radius:4px;
	background-color:#faa85f;
	top:8px;
}
.declare__title:before{
	left:-4px;
}
.declare__title:after{
	right:-4px;
}
</style>

<div class="declare__content">
	<div class="declare__title">免责声明</div>
 	 	活动内容、信息等由活动组织者个人提供,请网友自行核对真伪、确认细节。参加活动,请注意人身及财产安全。
 	 	http://wallimn.iteye.com。
</div>
  • 大小: 5.3 KB
分享到:
评论

相关推荐

    CSS伪元素:after:before的特殊用法demo

    综上所述,CSS伪元素`:after`和`:before`是强大的工具,能够帮助开发者在不破坏HTML结构的前提下,实现各种创意和功能。通过熟练掌握和灵活运用这些伪元素,我们可以创建出更加丰富、互动性和用户体验良好的网页。在...

    2014-10-10-CSS伪元素before和after的应用1

    【CSS伪元素::before和::after的应用】 在CSS中,伪元素和伪类是两种不同的概念,它们在页面样式设计中扮演着重要角色。伪类是用于定义元素在特定状态下的样式,比如`:hover`表示鼠标悬停时的状态,`:focus`表示...

    CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before

    CSS伪元素:before和after伪元素的使用和应用 CSS中的伪元素(Pseudo Element)是一种特殊的HTML元素,用于在文档树中添加虚拟元素,以便实现特定的样式或布局效果。在CSS中,有两种常用的伪元素::before和:after...

    CSS按钮与伪元素

    常见的伪元素有`::before`和`::after`,分别用于在元素内容之前或之后插入内容。例如,可以使用`content`属性在按钮的前后添加装饰性元素,如图标或边框。另外,`::first-letter`和`::first-line`用于选中元素的第一...

    CSS3中伪元素::before和::after的用法示例

    众所周知::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。 一、与普通...

    CSS伪类:before在元素之前 :after 在元素之后实例讲解

    特别地,CSS伪类中的`:before`和`:after`是生成内容的伪元素,它们能够在元素内容的前面或后面动态地添加额外的元素,让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...

    css-div的border属性使用&伪元素伪类.docx

    对于现代浏览器,推荐使用双冒号`::`来表示伪元素,而对于较旧的浏览器,如IE,可能需要使用单冒号`:`的CSS2语法来保证兼容性。 在实际开发中,理解并熟练运用`border`属性和伪元素,能够帮助我们创造出丰富多样的...

    CSS伪元素before、after设置特殊效果:制作时尚焦点图相框

    CSS伪元素`::before`和`::after`是CSS3中的关键概念,它们允许开发者在元素内容前后插入额外的非实际DOM内容。这两个伪元素的名字表明了它们在元素内部的位置,`::before`用于在元素内容前面添加内容,而`::after`则...

    CSS伪元素 :before, :after, box-shadow应用

    首先,CSS伪元素`:before`和`:after`允许我们在元素内容的前面或后面添加内容,而无需修改HTML文档的结构。这些伪元素默认是透明的,我们需要通过`content`属性来定义它们显示的内容。例如,在一个引用段落(`&lt;p&gt;`)...

    css3 transform属性利用伪元素制作字母卡片开关门

    - CSS3的伪元素如`:before`和`:after`,可以让我们在HTML元素前后添加内容,而无需修改HTML结构。在这里,它们可能被用来创建字母的额外部分,配合`transform`实现3D效果。 - 通过设置伪元素的`transform-origin`...

    详解CSS 伪元素及Content 属性

    CSS伪元素使用双冒号(::)语法,而在某些情况下,单冒号(:)语法也是可接受的。伪元素与常规元素不同,它们可以用来增加元素的样式和功能,而不会影响HTML结构的清晰性。 伪元素包括但不限于以下几种: 1. ::...

    css3 transitions和伪元素制作4种超酷鼠标经过hover动

    最后是“飞翔的独眼怪”效果,这可能涉及到更复杂的CSS3技巧,包括使用伪元素如`:before`和`:after`,以及可能的SVG图形。这些伪元素可以作为额外的视觉元素添加到主元素中,通过`transform`和`animation`属性实现...

    权重,浮动,精灵,部分伪类伪元素示例

    在压缩包中的"share"文件可能包含了关于这些概念的代码示例、讲解和演示,通过学习和实践这些示例,你可以更好地理解并掌握CSS中的权重计算、浮动布局、精灵图的使用以及如何利用伪类和伪元素来增强页面的交互性和...

    CSS利用伪元素实现导航栏斜线分隔

    本文将深入探讨如何使用CSS伪元素来实现这一效果。 首先,让我们了解一下CSS伪元素的概念。伪元素是CSS中用于选择文档中的特定部分,但这些部分并不是实际的DOM元素。常见的伪元素有`:before`和`:after`,它们分别...

    css伪类.docx

    7. `:before` 和 `:after` 伪元素:`:before` 在元素的内容前面插入内容,`:after` 则在元素内容后面插入。这常用于添加装饰性的内容,如图标或引号,而无需修改HTML结构。 8. 多重伪元素:可以同时使用多个伪元素...

    hselect是一个用来通过js修改伪元素css值的小工具

    在Web开发中,CSS伪元素是不可直接通过JavaScript选中和操作的。因为它们并非DOM树中的实际元素,而是由浏览器根据CSS规则自动生成的。`hselect` 就是为了解决这个问题,它提供了一种方式,让我们能够通过JavaScript...

    HTML5选择器和伪元素----学习分享

    1. `::before`和`::after`:这两个伪元素可以在元素的内容前面或后面插入内容。它们通常结合`content`属性使用,可以用于添加图标、装饰性的引号等。 2. `::first-letter`和`::first-line`:分别应用于元素的第一个...

    详细解读CSS中的伪类after

    【CSS伪类`:after`详解】 CSS中的`:after`伪类是一种非常实用的特性,它允许我们在元素内容之后插入额外的非元素内容。这在处理布局、清除浮动、添加装饰性内容等方面尤其有用。本文将深入探讨`:after`伪类的工作...

Global site tag (gtag.js) - Google Analytics