html - use :before and :after elements to fill remaining space of text element -


this question has answer here:

i'm trying create effect frames title tag 2 line either side fill remaining width of container. i'm trying create whatever length title text is, still same effect + amount of spacing. image better shows i'm trying explain:

enter image description here

the closest i've got using percentage widths, if small title used there lots of remaining space. add background color span object within title tag, i'm trying make effect work on varied background colors.

here's jsfiddle: https://jsfiddle.net/wv9zcuvm/ , code:

html:

<h2><span>small title</span></h2>

css:

h2{     width:100%;     position:relative;     top:0; left: 0; }  h2:before, h2:after{     content:"";     display:inline-block;     width:30%;     height:1px;     background-color:red;     position:relative;     top: -10px; }  h2:before{     left:0; }  h2:after{     right:0; }  h2 span{     width:40%;     display:inline-block;     text-align:center; }

can suggest how can achieve i'm trying create?

you use display:flex; without span tag

h2 {    display: flex;  }  h2:before,  h2:after {    content: '';    flex: 1;    margin: auto 1em;    height: 0;    border-top: solid red 1px;  }
<h2>small title</h2>  <h2>this long title</h2>

h2 {    display:flex;    text-align:center;    }  h2:before,  h2:after {    content:'';    flex:1;    margin:auto 1em;    height:0;    border-top:solid red 1px;    }
<h2>big long title <br/>on 2 lines ? title</h2>


Comments

Post a Comment

Popular posts from this blog

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

android - How to create dynamically Fragment pager adapter -

i unable create dynamic layout each tabs, able create tabs dynamically constructor(public mypageradapter(fragmentmanager fm , int nooftabs)), coudn't inflate view each tabs creating each fragment should dyanmic. public class mypageradapter extends fragmentpageradapter { private final string[] titles = { "categories", "home", "top paid", "top free", "top grossing", "top new paid", "top new free", "trending" }; int nooftabs; **public mypageradapter(fragmentmanager fm , int nooftabs) { super(fm); this.nooftabs = nooftabs; }** /*public mypageradapter(fragmentmanager fm) { super(fm); }*/ @override public charsequence getpagetitle(int position) { return titles[position]; } @override public int getcount() { ...
Read more

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more