CSS伪元素before、after妙用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用before.after</title>
<style>
body, ul, li, p {margin:0; padding:0; font-family:Verdana, Geneva, sans-serif;}
ul li {list-style:none;}
img {border:0 none}
.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:0px; top:0px; display:none;}
.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:‘‘; position:absolute; left:-1px; top:20px;}
.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:‘‘; position:absolute; top:-1px; left:20px;}
.content .focus {display:block;}

</style>
</head>

<body>

<div class="content">
<a href=""><img src="jiawin_1.jpg" />
  <p class="focus"></p></a>
</div>

</body>
</html>

http://www.jiawin.com/css-before-after

时间： 2024-10-04 05:15:00

CSS伪元素before、after妙用的相关文章

jQuery如何改变css伪元素样式

首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式. :first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式. :before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容. :after 伪元素:":after" 伪元素

CSS伪元素before和after

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

用CSS伪元素制作箭头

现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用display来改变,before和after是在CSS2的新特性(现在已经老了),浏览器对其兼容性还未了解. 实现代码如下: 1 <!--CSS样式,在项目中可以把相同的属性与属性值对写在一起,这里是方便学习--> 2 <style> 3 .divtest{ 4 position: ab

CSS——伪元素

CSS伪元素 伪元素的语法: selector:pseudo-element {property:value;} 作    用 添加特殊样式 :first-line 伪元素 "first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式: p{font-size: 12pt}p:first-line{color: #0000FF;font-variant:small-caps;}<p>Some text that ends up on two or more l

css 伪元素 :hover :active :before :after :visited :link :focus ...

CSS 伪元素 所有CSS伪类/元素 选择器 示例 示例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接(点击后的效果) :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个<p> 元素的第一个字母 :first-line p:first-line 选择

CSS伪类与CSS伪元素的区别及由来

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准

JavaScript修改CSS伪元素:after和:before的样式

CSS伪元素:before和:after可以实现很多有趣的功能,我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素.伪元素可以用来定义样式,但是和正常的dom元素不同,我们没有办法选中这些伪元素,也就不能像普通元素那样来修改它. <head> <style> .content{ margin-top:100px; } .content:before{ content:'target-before'; color:#33B5E5; po

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式. 在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行

转贴：CSS伪类与CSS伪元素的区别及由来具体说明

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章

js如何控制css伪元素内容（before，after）

原文:js如何控制css伪元素内容(before,after) js如何控制css伪元素(before,after) @(CSS 笔记)[伪元素|css3]曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗暴的方式: 简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则 <style> p:after{content:'我是后缀'} <