css伪类after使用

impress

2013-12-25

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'msn_layer.jsp' starting page</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	
		h1, h2, h3, h4, h5, h6 {
		    font-size: 12px;
		    font-weight: normal;
		    margin: 0;
		    /*margin-bottom: -11;*/
		}
		.article-block {
			width: 660px;
			height: 900px;
			border: 1px solid #DAE0E1;
		    margin-left: 10px;
		    padding: 18px 0;
		}
		
		.artile-navtitle {
			background: none repeat scroll 0 0 #CCCCCC;
		    display: inline-block;
		    height: 22px;
		    line-height: 22px;
		    margin-top: 20px;
		    padding: 0 15px;
		    width: 50px;
		}
		
		.clearfix {
		}
		.clearfix:after { // 在元素之后添加内容，控制ul不能给自动控制高度
		    clear: both;
		    content: "";
		    display: block;
		    height: 0;
		}
		.artile-navlist {
		    border: 1px solid #CCCCCC;
		    padding: 20px 0 20px 20px;
		}
		.artile-navlist li {
			background: #f5f5f5;
			opcity: 0.5;
		    float: left;
		    height: 27px;
		    line-height: 25px;
		    margin-right: 18px;
		    margin-top: 2px;
		    width: 260px;
		}
		
		.artile-navlist li span {
		    background: none repeat scroll 0 0 #CCCCCC;
		    display: block;
		    float: left;
		    height: 27px;
		    line-height: 27px;
		    text-align: center;
		    width: 55px;
		}
		
		.artile-navlist li a {
		    display: block;
		    float: left;
		    height: 27px;
		    line-height: 27px;
		    margin-left: 5px;
		    overflow: hidden;
		    width: 200px;
		}
		a {
		    color: #333333;
		    text-decoration: none;
		}
		
		a:link {
			color:blue;
		}
		
		a:visited {
			color:olive;
		}
		
		a:hover {
			text-decoration: underline;
		}
		a:active {
			font-size: 14px;
		}
		
		ul, li, p {
		    list-style: none;
		    margin: 0;
		    padding: 0;
		}
		
	</style>
  </head>
  
  <body>
    <div class="article-block">
    	<h3 class="artile-navtitle">文章导航</h3>
    	<ul class="artile-navlist clearfix">
			<li>
				<span>第1页</span>
				<a href="#">面朝前方</a>
			</li>
			<li>
				<span>第2页</span>
				<a href="#">打开胸廓</a>
			</li>
			<li>
				<span>第3页</span>
				<a href="#">面朝前方</a>
			</li>
			<li>
				<span>第4页</span>
				<a href="#">面朝前方</a>
			</li>
			<li>
				<span>第5页</span>
				<a href="#">面朝前方</a>
			</li>
			<li>
				<span>第6页</span>
				<a href="#">面朝前方</a>
			</li>
			<li>
				<span>第7页</span>
				<a href="#">面朝前方</a>
			</li>
		</ul>
    </div>
  </body>
</html>

属性	                描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	        向文本的首行添加特殊样式。	1
:before	        在元素之前添加内容。	2
:after	        在元素之后添加内容。	2

string类 css request