rayln
rayln

CSS3的before, after和label的for用法

使用before和after可以用content, 结合before, after可做写入内容和样式

看例子: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.before{
		width: 100px;
		height:100px;
		border: 1px solid blue;
	}
	.before::before{
		content:'bef';
		width: 20px;
		height: 20px;
		background-color:red;
	}
	.before::after{
		content:'aft';
		width: 20px;
		height: 20px;
		background-color:blue;
	}
</style>
</head>
<body>
	<input id='input1' type='radio'/>
	<div class="before"></div>
	<label for='input1'>点击我</label>
	
</body>
</html>

你可能感兴趣的:(BEFORE)

  • mysql创建线程处理链接请求 斜不靠谱
    mysqld通过RUN_HOOK(server_state,before_handle_connection,(NULL));调用/**Threadhandlerforaconnection@paramargConnectionobject(Channel_info)Thisfunction(normally)doesthefollowing:-Initializethread//初始化线程-In
  • 每周一段仿写-181028 Zeroun_Ph
    Theneedfornewlearningstylesdoesnotmeanignoringthewaysinthepast.TheInternetagebringssomechallengesnotseenbefore,mostobviouslyandmostworryinglyuselessinformationblast.Butfragmentationoflearningandtheine
  • 果子酱的scalerstalk第六轮新概念朗读持续力训练day102 20210121 S果子酱
    练习材料：新概念3l3-(2)任务配置：L0+L1+L4知识笔记：字母组合：nnonefindnonamenosenotenothingnnwinnerfunnydinnersunnyknk不发音kneeknifeknowgng不发音signdesignforeigncampaign短语：remains名词，遗址，遗迹B.C.beforeChrist公元前A.D.annodomini公元happe
  • css设置背景图片透明度
    .demo{position:relative;width:500px;height:300px;line-height:50px;text-align:center;color:red;}.demo::before{content:"";position:absolute;left:0;top:0;z-index:-1;/*放在内容背后*/width:500px;height:300px;bac
  • Java学习第七十六部分——Java内存模型 (JMM)
    目录一、前言概述提要二、关键作用解释三、核心概念剖析四、问题解决方案五、happens-before原则六、总结归纳升华一、前言概述提要Java内存模型(JavaMemoryModel,JMM)是Java虚拟机(JVM)规范中定义的一个核心概念，它规定了多线程环境下，线程如何与主内存交互以及线程之间如何通过主内存共享变量。它的主要目的是解决多线程编程中常见的三大核心问题：可见性、有序性、原子性。二
  • 泽平 的ScalersTalk第六轮新概念朗读持续力训练Day 95 20210626 郑泽平
    练习材料：Lesson94FuturechampionsExperimentshaveprovedthatchildrencanbeinstructedinswimmingataveryearlyage.AtaspecialswimmingpoolinLosAngeles,childrenbecomeexpertatholdingtheirbreathunderwaterevenbeforethe
  • C++程序编译 错误提示和评测状态 子龙烜 OpenJudgec++开发语言
    编译常见错误提示1.[Error]expected';'before'cout'。在cout前面，缺少一个分号。2.[Error]'arr'wasnotdeclaredinthisscope。未定义变量名arr。3.[Error]ldreturned1exitstatus。重复运行错误(上一个运行的程序，输入窗口没有关掉)。或者main写错了。评测状态含义ACAccept程序通过WAWrongAn
  • aleppo_parser ["syntax error before: ","'
    Chicagoboss编译时出现如下错误：aleppo_parser["syntaxerrorbefore:","'出现此类错误是因为文件中出现中文符号，这时需要细心排查
  • A Study in Scarlet 39 Mr_Oldman
    WehadallbeenwarnedtoappearbeforethemagistratesupontheThursday;butwhentheThursdaycametherewasnooccasionforourtestimony.AhigherJudgehadtakenthematterinhand,andJeffersonHopehadbeensummonedbeforeatribunal
  • Lamada表达式的一些使用范例 singlezero
    最近一直在看Lamada表达式,在开发中使用后现在真的越看越顺眼,这种函数式编程思维只要初窥门径,简直就停不下来,然后花了点时间做了一个使用总结范例,有不全面或是不对的请给位大佬指出,咱们一起探讨.importcom.google.common.collect.Lists;importcom.google.common.collect.Maps;importorg.junit.Before;imp
  • 放手爱吧，哪怕只有一天 Ahomelesskitten
    在家里闲来无事，看了《beforesunrise》和《beforesunset》。两部电影的主演，导演，编剧都是同一批人，拍摄时间却相隔九年。电影的中文翻译时《爱在黎明破晓前》和《爱在落日余辉时》。中文的意境很悠远，一语道破，使原本稀松平常的片名有了别致的感觉。beforesunrise，beforesunset爱在黎明破晓前，爱在落日余辉时1995年，2004年。1995年的一个傍晚，列车上，他
  • vue2解决页面重排滚动条问题 啥都不是的小白菜 前端javascripthtml
    项目场景：项目场景：vue2问题描述例如：在一个卡片页面底部添加一条数据后，滚动条自动跑到了页面顶部去了：原因分析：可能是添加数据后页面重排导致的解决方案：提示：通过deepseek给出了一个较为高效的方案且不会干扰用户的正常滚动行为exportdefault{data(){return{scrollPosition:0};},beforeUpdate(){this.scrollPosition=
  • uniapp基本使用 shadouqi uniappuni-app
    资料咸虾米视频黑马视频uniapp官方文档hbuilder1.uniapp页面生命周期1.1onLoad还拿不到dom适合接受上页的参数，联网取数据，更新data。相当于created和beforeCreated期间主要的作用是比如说获取url上的query参数*url:***/**?name=张三&age=18import{onLoad}from"@dcloudio/uni-app"onLoad
  • 浅析Vue3(vue3笔记之进阶篇) 唆键盘的小前端 Javascript前端vue笔记vue.js前端前端框架javascriptwindows
    本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))喜欢的话点个赞,谢谢!有问题欢迎指正!!前面已经讲了基本的Vue生命周期和入门知识,本篇重点介绍Vue3的一些进阶知识1.vue-router路由Vue的路由对比React真是舒服太多了,路由守卫不需要自己配置,还可以方便自己添加一些自定义逻辑,比如在beforeEach加载进度条之类的,这里以Hash路由为
  • required archivelog files for a guaranteed restore point 查找GRP需要的归档文件 jnrjian oraclesql
    Appliesto:OracleDatabase-EnterpriseEdition-Version11.2.0.2andlaterInformationinthisdocumentappliestoanyplatform.GoalHowcanyoudeterminetherequiredarchivelogfilesneededforaguaranteedrestorepointbeforeru
  • CSS的content属性妙用指南 代码的余温 css前端
    CSS的content属性专门用于::before和::after伪元素，用于动态生成内容并插入到文档流中。其核心作用如下：一、主要功能插入文本内容p::before{content:"提示：";color:red;}→在每个元素前添加红色文字“提示：”插入图标（结合字体图标库）.download::after{content:"\f019";/*FontAwesome下载图标的Unicode*/
  • Lily的Scalers Talk第四轮新概念朗读持续力训练 Day153 2019-3-10 王华丽_839b
    听力材料AmanwhohadbrokenhisrightlegwastakentohospitalafewweeksbeforeChristmas.Fromthemomenthearrivedthere,hekeptonpesteringhisdoctortotellhimwhenhewouldbeabletogohome.HedreadedhavingtospendChristmasinhosp
  • 拆书-分析你的产品或者服务的竞争力 是心非心若流水
    拆书-分析你的产品或者服务的竞争力“Valueiscreatedbyremovingasignificantlimitationforthecustomer,inawaythatwasnotpossiblebefore,andtotheextentthatnosignificantcompetitorcandeliver.”Thecommondefinitionofvalueistheratiob
  • S02-9 审丑：排版四原则（四）：亲密【案例&作业】 Courage_CYY
    作业作业1before作业1after作业2before作业2after作业3before作业3after作业3after
  • 【数据库】触发器 Trigger 有事请出门右转
    触发器Trigger概念：数据库中的一个对象，相当于JS中的监听器触发器可以监听增删改三个动作比如说我想监听一张表，只要我增删改了这张表中的数据，我就可以触发这个触发器，去往另外一张表中记录一下日志语法：DELIMITER$$CREATETRIGGER`数据库名`.`触发器名`BEFORE/AFTERINSERT/UPDATE/DELETEON`数据库名`.`要监听的表名`FOREACHROW--
  • 【前端vue3面试题】2024最新面试实录vue3(2)，最新前端大厂高频面试题
    *watch与watchEffect*provide与inject重构虚拟DOM,diff算法生命周期更名beforeDestroy改名为beforeUnmountdestroyed改名为unmounted//Vue3.0也提供了CompositionAPI形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate===>setup()created===>setup()bef
  • Lan的ScalersTalk第四轮新概念朗读持续力训练Day 288 20190722 孙岚_9ff8
    练习材料：[Day17602019-07-22]Lesson24-2BeautyThereisnoskyinJunesobluethatitdoesnotpointforwardtoabluer,nosunsetsobeautifulthatitdoesnotwakenthevisionofagreaterbeauty,avisionwhichpassesbeforeitisfullyglimps
  • 日入一词_85：in turn cppUncleSix
    BeforeusingCEF4DelphiwithanapplicationmadewithDelphiorLazarus/ˈlæzərəs/,it'snecessarytounderstandthatCEF4DelphiisawrapperthatusesCEF'sCAPIand,inturn,CEFinsulatestheuserfromtheunderlyingChromiumandBlin
  • vue3面试题(个人笔记) 武昌库里写JAVA 面试题汇总与解析课程设计springbootvue.jsjava学习
    vue3比vue2有什么优势？性能更好，打包体积更小，更好的ts支持，更好的代码组织，更好的逻辑抽离，更多的新功能。描述Vue3生命周期CompositionAPI的生命周期：onMounted()onUpdated()onUnmounted()onBeforeMount()onBeforeUpdate()onBeforeUnmount()onErrorCaptured()onRenderTrac
  • android 无线调试_Android 11的无线调试 weixin_26739079 androiddebugpython安卓
    android无线调试Android11developerpreviewhaslotsofnewfeaturestolookbutoneofthecoolestisWirelessdebugging.ItisanewmethodfordeveloperstopairtheirAndroiddeviceswithacomputerwirelessly.Beforewedivemoreintothis
  • C++11 forward_list 从基础到精通：原理、实践与性能优化 码事漫谈 c++11c++list性能优化
    文章目录一、为什么需要forward_list？二、基础篇：forward_list的核心特性与接口2.1数据结构与迭代器2.2常用接口速览2.3基础操作示例：从初始化到遍历2.3.1初始化与遍历2.3.2插入与删除：before_begin的关键作用三、进阶篇：深入理解forward_list的特殊操作3.1emplace_aftervsinsert_after：效率差异的本质3.2迭代器失效：
  • Unity的TCP同步通信
    1.Socket中的重要APIusingSystem.Collections;usingSystem.Collections.Generic;usingSystem.Net;usingSystem.Net.Sockets;usingUnityEngine;publicclassLesson5:MonoBehaviour{//Startiscalledbeforethefirstframeupdat
  • ConcurrentHashMap 怎么保证可见性？ 牛马baby java开发语言Visio下载Visio免费面试资料
    面试资料大全｜各种技术资料-2000GConcurrentHashMap通过多种机制组合来保证线程间的可见性，这些机制在不同版本的JDK中有所差异，但核心思想都是利用Java内存模型(JMM)的happens-before规则来确保数据修改对所有线程可见。JDK1.7的可见性保证在JDK1.7的分段锁实现中，主要通过以下方式保证可见性：volatile变量：Segment中的count字段使用vo
  • yolov5训练失败总结 BTU_YC 深度学习pythonpytorch
    yolov5训练失败总结版本原因：在进行训练时，出现如下报错：UserWarning:Detectedcalloflr_scheduler.step()beforeoptimizer.step().InPyTorch1.1.0andlater,youshouldcallthemintheoppositeorder:optimizer.step()beforelr_scheduler.step().
  • 【pytorch】——Could not export Python function call ‘Scatter‘
    pytorch用pytorch的trace导出模型的时候，报错errorRuntimeError:CouldnotexportPythonfunctioncall'Scatter'.RemovecallstoPythonfunctionsbeforeexport.Didyouforgettoadd@scriptor@script_methodannotation?Ifthisisann.Modul
  • 插入表主键冲突做更新 a-john
    有以下场景： 用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。 问题： 如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。 解决： mysql中提供了一个sql语
  • Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
    一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello"   2.引用系统资源。格式：@android:type/name     android:textColor="@android:color/opaque_red"
  • 数据结构的基本介绍 天子之骄 数据结构散列表树、图线性结构价格标签
    数据结构的基本介绍 数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。   经典的数据结构大致如下：   一：线性数据结构 (1)：列表 a
  • 通过二维码开放平台的API快速生成二维码 一炮送你回车库 api
     现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs
  • ImageIO读取一张图片改变大小 3213213333332132 javaIOimageBufferedImage
    package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
  • myeclipse集成svn（一针见血） 7454103 eclipseSVNMyEclipse
                                     &n
  • 装箱与拆箱----autoboxing和unboxing darkranger J2SE
    4.2　自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
  • ajax传统的方式制作ajax aijuans Ajax
    //这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
  • 只用jre的eclipse是怎么编译java源文件的？ avords javaeclipsejdktomcat
    eclipse只需要jre就可以运行开发java程序了，也能自动 编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？ 还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
  • 前端模块化 bee1314 模块化
    背景： 前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
  • 处理百万级以上的数据处理 bijian1013 oraclesql数据库大数据查询
    一.处理百万级以上的数据提高查询速度的方法：        1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
  • mac 卸载 java 1.7 或更高版本 征客丶 javaOS
    卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
  • 【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
    第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中 第二部，Spark Streaming读取Kafka中的数据，进行实时分析   本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
  • Erlang vs TNSDL bookjovi erlang
          TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
  • 非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
    　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。 相关新闻： （1）IT行业成五大疾病重灾区：过劳死平均37.9岁
  • 读《研磨设计模式》-代码笔记-原型模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
  • 配置管理---svn工具之权限配置 chenyu19891124 SVN
    今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups]
  • 浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
                                     浅谈程序员的数学修养
  • 批量执行 bulk collect与forall用法 daizj oraclesqlbulk collectforall
    BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考：批量SQL之 F
  • Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
    1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
  • Yii CModel中rules验证规格 dcj3sjt126com rulesyiivalidate
    Yii cValidator主要用法分析：  yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError  
  • 基于vagrant的redis主从实验 dcj3sjt126com vagrant
    平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_
  • Memcached(二)、Centos安装Memcached服务器 frank1234 centosmemcached
    一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]： 建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
  • Remove Duplicates from Sorted List hcx2013 remove
    Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
  • Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • 浅谈enum与单例设计模式 247687009 java单例
    在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构 造器，导出静态成员变量，以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
  • 使用switch条件语句需要注意的几点 openwrt cbreakswitch
    1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
  • 配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 springmybatisJUnit
    Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有： 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是：    
  • Java 定时任务总结一 tuoni javaspringtimerquartztimertask
     Java定时任务总结  一.从技术上分类大概分为以下三种方式：  1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务;   说明：    java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
  • 一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank相似度计算文本相似度词袋模型余弦相似度
    本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下：     1、注册多个账号（一般10个以上）。     2、从多个账号中选择一个账号，发表1-2篇博文
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他