ingrese la descripción de la imagen aquí Este es mi código, necesito agregar un borde horizontal como en la imagen

<section class="about">
    <div class="container">
        <h1 class="text-center">The Resturant</h1>
        <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
        <div class="about-border"></div>
    </div>

</section>
0
Nikhil Raj A 27 ene. 2016 a las 14:32

5 respuestas

La mejor respuesta

Tratar

.about-border {
    display: block;
    width: 80px;
    height: 3px;
    background: #f1cd8f;
    margin: 20px auto;
}

/* Optional CSS to center align the heading text*/
.about h1, .about h2 {
   text-align: center;
}

Violín: https://jsfiddle.net/9oapmz9b/

5
Yug Kapoor 27 ene. 2016 a las 11:41

El div .about-border no es necesario, puede apuntar a un pseudo-elemento :after en su lugar. Por ejemplo:

.about:after { /* this is the border */
    content:"";
    display:block;
    width: 6em;
    max-width:70%;
    border-bottom: 0.3em solid #F3C577;
    margin: 2em auto 0;
}

Ejemplo completo: https://jsfiddle.net/6d6tvqb2/

2
paulflakstad 27 ene. 2016 a las 11:59

Prueba este código. hopw esto funciona.

<style>
.container {
    text-align: center;
}
.about-border {
    width: 200px;
    height: 3px;
    background: #F3C577;
    margin: 20px auto;
}

</style>
<section class="about">
    <div class="container">
        <h1 class="text-center">The Resturant</h1>
        <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
        <div class="about-border"></div>
    </div>
</section>
1
Makwana Ketan 27 ene. 2016 a las 11:46

aquí está el sol:
ingrese la descripción de la imagen aquí

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="app.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <section class="about">
    <div class="container">
      <h1 class="text-center">The Resturant</h1>
      <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
      <div class="col-xs-12"><hr></div>
    </div>
  </section>
</body>

</html>
1
Shrikant 27 ene. 2016 a las 11:44

O por ejemplo

.about .container h3 {border-bottom: 6px solid #000;}
1
Sato 27 ene. 2016 a las 11:40