CODEWITHSUNDEEP
htmlcss
Bird87 ZA
Bird87 ZA

Reputation: 2160

Not getting desired effect with CSS

I'm trying to get this effect with CSS (that little grey side stripe thingy):

enter image description here

However, nothing of what I'm doing is working. My code looks like this:

<header class="entry-header">
    <div class="entry-title">
        <h1>Contact</h1>
    </div>
    <div class="entry-float"></div>
</header><!-- .entry-header -->

I've tried floating div.entry-title left and padding div.entry-float, changed div.entry-float to <span>, tried using backgrounds on one div only, all of it unsuccessfully.

This must be 100% flexible, as not all headings are the same width. I'd prefer avoiding Javascript/jQuery entirely.

Can anybody assist?

Upvotes: 0

Views: 65

Answers (2)

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12156

There are various ways to achieve this, one of them is to add pseudo element to header, absolutely position it as desired and hide extra with overflow: hidden:

<h1>Content</h1>

h1 {
  text-transform: uppercase;
  font-size: 1em;
  color: grey;
  position: relative;
  overflow: hidden;
}

h1:after {
  content: "";
  display: inline-block;
  height: 4px;
  width: 100%;
  background: grey;
  position: absolute;
  top: 8px;
  margin-left: 10px;
}

JSBin.

Upvotes: 2

haxxxton
haxxxton

Reputation: 6442

I would do this with a trick where you place the "line" as a CSS3 pseudo element aligned to the center of the container. Then give the title element a background color with padding and place it over the top of the line. This will allow for variable length titles.

body{
    background:#FAFAFA;
}
.entry-title{
    position:relative;    
    margin:0 110px;
}
.entry-title:before{
    position:absolute;
    content:"";
    top:50%;
    background:#f7f7f7; /* line color */
    left:0;
    right:0;
    height:10px;
    margin:-5px 0 0; /* = half the height value */
}
h1{
    position: relative;
    color: #d9d9d9;
    padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
    background:#fafafa; /* same as background color of container element */
    display:inline-block;
}

JSFIDDLE DEMO

Upvotes: 3

Related Questions