css :before :after

p:before是在p标签里面的前部分,after是在p标签里面的后部分

<!DOCTYPE html>

<html>
<head>
<style>
p:before
{
content:"前面:";
background-color: #FF0000;
}
p:after
{
content:"后面:";
background-color: #0000FF;
}
p {
background-color: #00FFFF;
}
</style>
</head>

<body>

<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

<p><b>注释:</b>对于在 IE8 中工作的 :before,必须声明 DOCTYPE。</p>

</body>
</html>

时间: 2024-08-01 07:42:33

css :before :after的相关文章

值得学习的19个jQuery和CSS按钮教程

jQuery是继prototype之后又一个优秀的Javascrīpt框架,使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排 版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言. 这里就将分享国外19个值得学习的jQuery和CSS按钮教程,希望能有所帮助. Awesome CSS

css页面布局vertical-align:middle;和float:

问题描述 css页面布局vertical-align:middle;和float: <div class="row"> <div class="cell regist regist_show"> <b:message key="validatecode" /> </div> <div class="cell regist" style="float:left;&q

CSS中的滑动门技术

css 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素.在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用. 标

CSS选择符详解

核心提示:什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是.如下: body {}div {}p {}span {} 二.群组选择符 对于XHMTL对象,可以对一组同时进行了相同的样式指派.使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构

input标签写CSS时需要注意的几点

飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是input标签的高度不能统一,Firefox和IE中的高度始终不能一致;二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示. 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下<input>标签在默认浏览器中的实际差别. 结果发现:i

css 样式 求教-求大神指教css样式前后对齐不上

问题描述 求大神指教css样式前后对齐不上 求大神,苦恼一上午了.增加了一个样式通知管理.老前后对其不上, </tr> 可惜c币不够.真心求教 Blockquote 解决方案 </tr>代码送上 解决方案二: 代码能看见吗 </tr> 解决方案三: 看不到代码..把左尖括号去掉后再发来看看 解决方案四: 我的建议是不要用标签属性来定义高宽等,容易受到干扰,改为样式试试 解决方案五: 只能看到一堆 红叉....... 解决方案六: 老兄,你的图--挂了-- 解决方案七:

CSS中Font的一些基本知识点归纳总结

1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是计算机上存储的一套文字显示方式.通过对文字进行一些特殊处理(比如末端加强)来提高不同环境中文字的可读性. 比如同样大小的文字,在不同字体下的可读性是不同的. 一般来讲,一款字库的诞生,要经过字体设计师的创意设计.字体制作人员一笔一划的制作.修改,技术开发人员对字符进行编码.添加程序指令.装库.开发安

CSS 平级和儿子级样式写法示例

 input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式. input:checked+ol>li:中的大于是指当inoput 拥有了checked后它平级的OL下面儿子辈的li的样式,孙子辈的不继承. Html代码    代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" />

[HTML/CSS]uploadify自定义按钮样式

概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改.  样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式.  1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 backgroun

CSS样式----图文详解(二):css属性

主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 CSS的单位: html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样.CSS中的单位是必须要写的,因为它没有默认单位. 绝对单位:1 in=2.54cm=25.4mm=72pt=6pc. 各种单位的含义:in:英寸Inches (1 英寸 = 2.54 厘米)cm:厘