css before after基本用法【转】

时间：2024-01-03 15:28:44
<HTML><HEAD>

<meta http-equiv="content-Type"content="text/html;charset=utf-8">

<TITLE>css before after基本用法</TITLE>

<style>

    p::before{

        content: "H"

    }

    p::after{

        content: "d"

    }

    a {

        position: relative;

        display: inline-block;

        outline: none;

        text-decoration: none;

        color: #000;

        font-size: 32px;

        padding: 5px 10px;

    }  

    a:hover::before, a:hover::after { position: absolute; }

    a:hover::before { content: "\5B"; left: -10px; }

    a:hover::after { content: "\5D"; right:  -10px; }  

  </style>

<script type="text/javascript"    src="D:/Old PC/D/html/jQuery/jquery-3.1.0.js" ></script>

<script type="text/javascript">

</script>

</HEAD>

<BODY>

  <p>ello Worl</p>

<br/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <a href="http://www.baidu.com">aaa</a>

</BODY>

</HTML>

相关文章