-1

I'm not very good at this and I'm basically just googling everything. I'm trying to figure out how I could do a box shadow at the bottom of a text. Kinda like the image below (screencapped from a random blog/site).

enter image description here

I've managed to add the border but it extends to the length of the site instead of just under the text. So I don't know where to go from here.

Henry Woody
  • 14,024
  • 7
  • 39
  • 56
Victoria A
  • 1

2 Answers2

0

You can do this by setting the background-image of the element that contains your text with a linear-gradient.

For example:

.underlined {
  background-image: linear-gradient(180deg, transparent 0 60%, #f0640780 0 100%);
}
<p>
  <span class="underlined">Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Henry Woody
  • 14,024
  • 7
  • 39
  • 56
0

You can use this css code to do what you want box-shadow: 3px 15px 5px 0px rgba(50, 50, 50, 0.75);

AzafoCossa
  • 874
  • 8
  • 18