CODEWITHSUNDEEP
csscss-selectors
Kot Yat
Kot Yat

Reputation: 143

How to add a dash before text in CSS

I'm trying to add a dash before text. See image. How do I accomplish the dash before the text so that it looks like the image?

I have the following html

<div class="mrvl-ex-grid">
<article class="sample">
    <img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

Here's the jsfiddle with the CSS:

https://jsfiddle.net/weina67/0vozsjsb/

I got the hover menu and preview button to work (but not the dash at the middle. How would you add the dash at the middle between the preview button and label? See Image attached

enter image description here

The hover menu and label and preview button are shown when people hover over the image. Also I have to make the dash responsive (Looks good on 1024px, 1280px, 1440px). It has to show in the middle of preview button and label.

Note in the fiddle, you have to hover over the image to see the label and where I want the dash added.

Upvotes: 1

Views: 18986

Answers (5)

user5803163
user5803163

Reputation:

If you want an ACTUAL dash, you could try something like this:

.mrvl-ex-grid .sample:after {
    display : block;
    text-align : center;
    font-size : 4em;
    margin : 20px auto;
    color: #fff;
    content: "—";
}

For a demo, here's a Fiddle!

Upvotes: 5

user3369753
user3369753

Reputation:

Labels, as far as I'm aware, don't accept :before/:after pseudo-elements. Therefore, I propose simply adding a <hr> to your markup in the appropriate place (before the label), giving it whatever class name you'd like, and then apply the following styling:

.hr {
  width: 25%;
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  left: 37.5%;
  border: 0; // overrides standard <hr> styling
  background-color: white;
}

There are various enhancements you can make to this with preprocessors but hopefully it gives you the right idea.

Upvotes: 0

John Slegers
John Slegers

Reputation: 47091

Why not just add a div, with white background?

Demo :

body {
    background-color: rgba(6,158,173,0.85);
}

.longdash {
    padding : .2em 0 0 0;
    width : 5em;
    margin : 50px;
    background-color: #fff;
}
<div class="longdash"></div>

See also this Fiddle!

Note :

If you don't want an empty element, you could also use a :before or :after pseudo-element.

Demo :

body {
    background-color: rgba(6,158,173,0.85);
}

.mrvl-ex-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  min-width: 1024px;
}

.mrvl-ex-grid .sample {
  margin: 0;
  margin-right: 7px;
  position: relative;
}

.mrvl-ex-grid .sample:last-child {
  margin-right: 0;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(6, 158, 173, 0.85);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-preview-btn {
  background-image: url(../images/icon-glass-lt.svg);
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 50px auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-label {
  position: absolute;
  bottom: 22%;
  width: 100%;
  left: 0;
  font-weight: bold;
  font-size: 1.3em;
}

.mrvl-ex-grid .sample:hover .mrvl-ex-item-hover-menu {
  opacity: 1.0;
}

.mrvl-ex-grid .sample:hover img {
  filter: blur(4px);
}

.mrvl-ex-grid .sample img {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
}

.mrvl-ex-grid .sample:after {
    display : block;
    width: 5em;
    height : .1em;
    margin : 50px auto;
    background-color: #fff;
    content: "";
}
<div class="mrvl-ex-grid">
<article class="sample">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=200&h=200" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

See also this Fiddle!

Upvotes: 0

user4051844
user4051844

Reputation:

Using the :before pseudo selector you can create an simple element before anything you want.

Example code:

article.sample:before {
  content: "";
  display: block;
  border: 1px solid grey;
  width: 75%;
  margin: 20px auto;
}

This creates a 75% width dash before your sample.

 .mrvl-ex-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  min-width: 1024px;
}

.mrvl-ex-grid .sample {
  margin: 0;
  margin-right: 7px;
  position: relative;
}

article.sample:before {
  content: "";
  display: block;
  border: 1px solid grey;
  width: 75%;
  margin: 20px auto;
}

.mrvl-ex-grid .sample:last-child {
  margin-right: 0;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(6, 158, 173, 0.85);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-preview-btn {
  background-image: url(../images/icon-glass-lt.svg);
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 50px auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-label {
  position: absolute;
  bottom: 22%;
  width: 100%;
  left: 0;
  font-weight: bold;
  font-size: 1.3em;
}

.mrvl-ex-grid .sample:hover .mrvl-ex-item-hover-menu {
  opacity: 1.0;
}

.mrvl-ex-grid .sample:hover img {
  filter: blur(4px);
}

.mrvl-ex-grid .sample img {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
}
<div class="mrvl-ex-grid">
<article class="sample">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=200&h=200" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

Click here for the fiddle: https://jsfiddle.net/0vozsjsb/2/

Upvotes: 3

somethinghere
somethinghere

Reputation: 17340

Why not simply mimick it with a background?

.mrvl-ex-item-label {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" viewBox="0 0 50 1"><rect x="0" y="0" width="50" height="1" fill="white" /></svg>') no-repeat 50% 0;
    padding-top: 50px;
}

I am using an SVG here because its a little easier to reason about (although a single white pixel image could be stretched using background-size and would probably takle up even less bytes in base-64.

.mrvl-ex-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  min-width: 1024px;
}

.mrvl-ex-grid .sample {
  margin: 0;
  margin-right: 7px;
  position: relative;
}

.mrvl-ex-grid .sample:last-child {
  margin-right: 0;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(6, 158, 173, 0.85);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-preview-btn {
  background-image: url(../images/icon-glass-lt.svg);
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 50px auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-label {
  position: absolute;
  bottom: 22%;
  width: 100%;
  left: 0;
  font-weight: bold;
  font-size: 1.3em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" viewBox="0 0 50 1"><rect x="0" y="0" width="50" height="1" fill="white" /></svg>') no-repeat 50% 0;
  padding-top: 50px;
}

.mrvl-ex-grid .sample:hover .mrvl-ex-item-hover-menu {
  opacity: 1.0;
}

.mrvl-ex-grid .sample:hover img {
  filter: blur(4px);
}

.mrvl-ex-grid .sample img {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
}
<div class="mrvl-ex-grid">
<article class="sample">
    <img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

It might be better to use a single-pixel base64 string for the white line as its easier and widely supported, but I just find the SVG approach cool. Heres how it would like as a single pixel base64 data string:

.mrvl-ex-item-label {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P8////fwAKAAP+j4hsjgAAAABJRU5ErkJggg==') no-repeat 50% 0;
    background-size: 100px 2px;
    padding-top: 50px;
}

The advantage being that images are much easier to work with than SVGs and their unpredictable behaviour...

Upvotes: 0

Related Questions