CODEWITHSUNDEEP
htmlcsspseudo-element
Javid
Javid

Reputation: 512

Draw square brackets around multi-line text

I have wrapped heading with square brackets but on mobile it looks ugly. how do we keep square brackets around the text if text goes to next line.

Here is HTML and CSS code

.widget-title:before {
  content: '[';
  color: #ffb1bb;
  font-size: 60px;
  text-align: right;
  padding-right: 10px;
}
.widget-title:after {
  content: ']';
  color: #ffb1bb;
  font-size: 60px;
  text-align: left;
  padding-left: 10px;
}
<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

enter image description here enter image description here

Upvotes: 7

Views: 4832

Answers (3)

kukkuz
kukkuz

Reputation: 42352

Update: This works for the first line overflowing to the second line.

If you can use a flexbox, it would suffice to add this to widget-title:

display: flex;
align-items: center;

See demo below:

.widget-title {
  display: flex;
  align-items: center;
}
.widget-title:before {
  content: '[';
  color: #ffb1bb;
  font-size: 60px;
  text-align: right;
  padding-right: 10px;
}
.widget-title:after {
  content: ']';
  color: #ffb1bb;
  font-size: 60px;
  text-align: left;
  padding-left: 10px;
}
<div class="widget-title">This is a very long title, and too long as it is now. This is a very long title, and too long as it is now. This is a very long title, and too long as it is now</div>

Upvotes: 6

Mohammad Usman
Mohammad Usman

Reputation: 39322

Here is another approach that can achieve this without the use of any pseudo elements.

Steps:

  • Create an element like <div> or <span> and make it an inline-block element so that its length becomes dependent on its content i.e length of this element will be as long as content inside it.
  • Apply left / right borders.
  • Use linear-gradient() to create 4 background images with specific width / height and draw on each corner of the box with background-position.

Necessary CSS:

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

Useful Resources:

  • Linear Gradient: MDN, W3.

  • Background Image: MDN, W3.

Output Image:

Output Image:

* {box-sizing: border-box;}

body {
  background: linear-gradient(white, silver);
  min-height: 100vh;
  margin: 0;
}

.widget-title {
  font: 20px/26px Arial, sans-serif;
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb);
  
  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  text-align: justify;
  border-width: 0 3px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 15px;
  margin: 20px;
}
<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

<h4 class="widget-title widgettitle">This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence...</h4>

Upvotes: 5

neophyte
neophyte

Reputation: 6626

Give the styling to the parent elemnt.

try-- 

.parent_of_widget-title:before {
    content: '[';
    color: #ffb1bb;
    font-size: 60px;
    text-align: right;
    padding-right: 10px;
}

.parent_of_widget-title:after {
    content: ']';
    color: #ffb1bb;
    font-size: 60px;
    text-align: left;
    padding-left: 10px;
}

Upvotes: 0

Related Questions