html – 点缀的顶部和底部边框比文本短

前端之家收集整理的这篇文章主要介绍了html – 点缀的顶部和底部边框比文本短前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想实现边框顶部和底部像下面的图像如何实现与CSS技巧?

挑战是我不希望整个宽度与边框,它也应该响应.

手机版本是http://i.imgur.com/XZTW28N.jpg,它也应该在桌面和移动浏览器中工作.

我尝试使用%width边框,但它不工作.

我写下面的代码,但它不是100%完美的答案.

HTML:

  1. <h1>How it Works</h1

CSS:

  1. h1:before,h1:after {
  2. content: "";
  3. height: 1px;
  4. background: linear-gradient(to right,rgba(0,0) 0%,rgba(147,147,1) 50%,0) 100%);
  5. display: block;
  6. margin-bottom: 10px;
  7. margin-top: 10px;
  8. }

http://jsfiddle.net/wjhnX/488/

解决方法

我在你的CSS中做了一些修改
  1. h1{
  2. text-align: center;
  3. font-size: 70px;
  4. }
  5.  
  6. h1:before,h1:after{
  7. position: relative;
  8. content: "";
  9. width: 30%;
  10. left: 35%;
  11. display: block;
  12. margin-bottom: 10px;
  13. margin-top: 10px;
  14. border-bottom: 5px dotted yellow;
  15. }

DEMO

编辑:

如果你想要一个固定的宽度你可以添加

  1. h1:before,h1:after{
  2. width: 150px; /* You can change this value */
  3. left: 50%;
  4. transform: translateX(-50%);
  5. }

DEMO2

猜你在找的HTML相关文章