<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>

css before after基本用法【转】的更多相关文章

  1. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. CSS选择器的新用法

    前面的话 现在,预处理器(如sass)似乎已经成为开发CSS的标配,正如几年前jQuery是开发JS的标配一样.JS的querySelector借鉴了jQuery的选择器思想,CSS选择器也借鉴了预处 ...

  4. CSS学习笔记（9）--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  5. css和@import区别用法

    css和@import都是调用外部样式表的方法. 一.用法 (1)link: <link rel="stylesheet" type="text/css" ...

  6. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  7. css的定义、用法、注释、命名规则、书写规范

    什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自 ...

  8. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  9. CSS 中 calc() 函数用法

    CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...

随机推荐

  1. ajax 异步请求 代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 自己实现数据结构系列二---LinkedList

    一.先上代码: 1.方式一: public class LinkedList<E> { //节点,用来存放数据:数据+下一个元素的引用 private class Node{ privat ...

  3. MyBatis自动生成Java/C#的Bean（Entity）的等价MYSQL实现函数

    这是单元测试代码:TESTTITLECASE.sql SELECT TITLECASE('ABC_DEF_hgk') as BEANNAME FROM DUAL; SELECT TITLECASE(' ...

  4. js排序方法

    function swap(ary, x, y) { if (x === y) return let temp = ary[x] ary[x] = ary[y] ary[y] = temp } //生 ...

  5. SQLserver 使用网络驱动器恢复数据库

    1. 公司内有多台虚拟机,因为公司提供出来的机器 硬盘总是不够大...所以想到了使用  映射网络驱动器的方式进行备份恢复工作. 学到的方法主要如下: 0. 首先打开sqlcmd 启动命令行界面 1. ...

  6. Jenkins 登录提示 登录无效 的解决办法

    学习自:https://www.cnblogs.com/amberly/p/6288773.html 1. jenkins服务器重启之后, 再次登录提示登录无效. 重启多次也无法解决. 2. 根据文档 ...

  7. Linux基础学习（8）--权限管理

    第八章——权限管理 一.ACL权限 1.ACL权限简介与开启: (1)ACL权限简介: (2)查看分区ACL权限是否开启: (3)临时开启分区ACL权限: (4)永久开启分区ACL权限: 2.查看与设 ...

  8. Oracle中rownum和rowid的理解

    rownum,rowid都叫伪列. 但是,rownum是逻辑上的编号,且其值总是从1开始,每行的rounum不是固定的.而rowid是“物理”编号.若数据库文件没有移动,则每行的 rowid一般是固定 ...

  9. 照片 GPS 信息查询

    照片 GPS 信息查询 经纬度查询 https://jingweidu.51240.com/ // 30.27832833333333, 120.01914111111111 30 + 16/60 + ...

  10. Conjugate Function

    共轭函数 共轭函数的定义: 设函数f:Rn→R,定义函数f∗:Rn→R为: f∗(y)=sup(<y,x>−f(x))  x∈D 此函数称为函数f的共轭函数.即函数yx和函数f(x)之间差 ...