水平线在背景中使用Css3 [英] Horizontal Line in Background using Css3

问题描述

如何只使用css3来实现这种类型的文本，意味着在标签的中间有一条水平线...可以使用纯CSS ...

>

这里我的结构： -

 < p class =datedAside> 4周前< / p& 
  

解决方案

这里有一种方法，

HTML：

 < p class = dateAside> < span> 4周前< / span> < / p> 
  

CSS：

  p {background：＃000; height：1px; margin-top：10px;} 
 p span {background：#fff; padding：10px;位置：相对; top：-10px; left：20px} 
  

DEMO： http://jsfiddle.net/9GMJz/

How to implement this type of style to text using only css3, means a horizontal line in the middle of the tag... Can it be possible using pure css...

Here's my structure:-

<p class="datedAside">4 weeks ago</p>

解决方案

Here's one way to do it by adding a span inside the p.

HTML:

<p class="datedAside"> <span> 4 weeks ago </span> </p>​

CSS:

p {background: #000; height:1px; margin-top:10px;}
p span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}​

DEMO: http://jsfiddle.net/9GMJz/

这篇关于水平线在背景中使用Css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！