styling - CSS border above and below but not full width -
styling - CSS border above and below but not full width -
i attempting create global css style blockquote markup of site i'm working on. goal create mockup image below. i'd prefer avoid having generate additional markup besides existing <blockquote>
element.
using css pseudo-classes i'm trying add together horizontal borders above , below blockquote, borders should extend 50% of width of text, whereas border extend way across.
class="snippet-code-css lang-css prettyprint-override">blockquote { margin:0 auto;position:relative;text-align:center; display:table;font-size:15px; } blockquote:before { content:'\a';height:1px;width:40%;position:absolute;width:40%;background:#000; } blockquote:after { content:'\a';height:1px;width:40%;position:absolute;width:40%;background:#000;bottom:0; }
class="snippet-code-html lang-html prettyprint-override"><blockquote> neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit<br> est qui dolorem ipsum quia dolor sit down amet rem ipsum quia </blockquote>
if width fixed can utilize negative margin-left center element. in case margin-left: -20%;
:
class="snippet-code-css lang-css prettyprint-override">blockquote { margin:0 auto;position:relative;text-align:center; display:table;font-size:15px; } blockquote:before, blockquote:after { content:''; position: absolute; top: 0; left: 50%; width:40%; height:1px; margin-left: -20%; background: #000; } blockquote:after { top: inherit; bottom: 0; }
class="snippet-code-html lang-html prettyprint-override"><blockquote> neque porro quisquam e porro quisquest qui dolorem ipsum quia dolor sit<br> est qui dolorem ipsum quia dolor sit down amet rem ipsum quia </blockquote>
css styling text-styling blockquote
Comments
Post a Comment