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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -