What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Check out this CodePen:

https://codepen.io/jossnaz/pen/BMwpjR

HTML

<br>
<div class="" style="
">
        <span class="" style="">
Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos hendrerit torquent pellentesque per euismod, velit molestie eleifend per rhoncus feugiat fermentum proin.

Suspendisse porttitor diam egestas curabitur malesuada netus enim bibendum, lacinia integer suscipit sem taciti ut nisi nunc, vivamus neque tempor dictum pretium condimentum litora.

Litora primis justo commodo posuere id nullam lacus tempor sociosqu cubilia auctor, nulla maecenas cubilia lacus quisque malesuada risus viverra mattis senectus porttitor ligula a fringilla dui elit nulla hendrerit in condimentum tortor.

Sollicitudin cursus augue semper sodales vitae pel
        </span>
      </div>

CSS

div{
  max-width: 500px;
  width: 500px;
  background-color: cornflowerblue;
}

blockquote, span{
  padding-left: 50px;
  background-color: salmon;
  position: relative;
  &:before {
    content: '“';
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 4.8rem;
    font-style: italic;
    line-height: 0.75;
    text-align: left;
    color: green;
    font-weight: normal;
}
}

Result shows an overflowing element:

https://i.sstatic.net/pq5IP.png

What am I looking for? I want the salmon red inline element to stop overflowing its parent. I still want to use :before and maintain it as an inline element.

htmlcss

Answer №1

Consider using the CSS property text-indent instead of padding to position the pseudo element relative to the parent container:

div {
  max-width: 500px;
  width: 500px;
  background-color: cornflowerblue;
  text-indent:50px;
  position: relative;
}

span {
  background-color: salmon;
}
span:before {
  content: '“';
  position:absolute;
  left: 0;
  top: 6px;
  font-size: 4.8rem;
  font-style: italic;
  line-height: 0.75;
  text-align: left;
  color: green;
  font-weight: normal;
  text-indent:0;
}
<br>
<div>
  <span>
Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos hendrerit torquent pellentesque per euismod, velit molestie eleifend per rhoncus feugiat fermentum proin.

Suspendisse porttitor diam egestas curabitur malesuada netus enim bibendum, lacinia integer suscipit sem taciti ut nisi nunc, vivamus neque tempor dictum pretium condimentum litora.

Litora primis justo commodo posuere id nullam lacus tempor sociosqu cubilia auctor, nulla maecenas cubilia lacus quisque malesuada risus viverra mattis senectus porttitor ligula a fringilla dui elit nulla hendrerit in condimentum tortor.

Sollicitudin cursus augue semper sodales vitae pel
        </span>
</div>

Answer №2

By applying padding-left: 50px; to the <blockquote>/<span> tags, the issue arises. One solution is to utilize the ::after pseudo-element to create a 50px gap before the text and position the quotation mark using the ::after pseudo-element. Here is an example:

blockquote,
span {
  background-color: salmon;
  position: relative;
  &::before {
    content: "";
    display: block;
    float: left;
    width: 50px;
    height: 1px;
  }
  &::after {
    content: "“";
    position: absolute;
    left: -50px;
    top: 6px;
    font-size: 4.8rem;
    font-style: italic;
    line-height: 0.75;
    text-align: left;
    color: green;
    font-weight: normal;
  }
}

If unsure about your exact requirements, another approach is to use text-indent to adjust the text alignment.

It is recommended to explicitly define display: inline; for your <blockquote>/<span> selector styling, as the default display for a <blockquote> is display: block;.

Answer №3

By assigning the span tag to display: block;, you'll have it all sorted out.

blockquote, span{
    display: block;
    padding-left: 50px;
    background-color: salmon;
    position: relative;
    ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with executing google.script.run in Google Web App

I am encountering an issue with the function I have defined in my .gs file: function doGet(e) { return HtmlService.createHtmlOutputFromFile('index') } function goToMaster() { const ss = SpreadsheetApp.getActiveSpreadsheet() const sheet = s ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Delete a product from the cart when the selection in the dropdown changes

In the process of creating an e-commerce platform, I am implementing a feature that allows users to choose items from a dropdown menu based on their category. However, I want to restrict users from adding more than one item per category. If a user tries to ...

phpjqueryajaxhtml

Entering numbers using <input type="number"> does not restrict invalid inputs, while accessing "element.value" does not give me the ability to make corrections

According to the MDN documentation on the topic of <input type="number">: It is said that they have built-in validation to reject entries that are not numerical. But does this mean it will only reject non-numerical inputs when trying to ...

javascripthtmlvue.js

Access the original source code using jQuery

Is there a way to retrieve the raw HTML code (as seen in Chrome's source code window) using JQuery without having quotes converted to &quot or HTML symbols converted to text? I have tried using html() and text(), but neither method seemed to give ...

javascriptjqueryhtml

Exploring the possibilities of applying CSS to customize the color of various elements

Is there a way to set the color of elements in CSS so that it applies to everything such as fonts, borders, and horizontal rules when applied to the body? How can I accomplish this effectively? ...

htmlcsscolors

Alter Text Using Typewriter

Recently, I have been experimenting with code on my glitch website, trying to create typewriter text. Thanks to help from a user on StackOverflow, I was able to achieve this effect successfully. However, I am now facing a new challenge. My goal is to make ...

javascripthtml

Best practices for handling multiple tables in AngularJS HTML

How can I loop through multiple tables in AngularJS? Here is an example of my HTML code: <div ng-repeat="stuff in moreStuff"> <table> <h1>{{stuff.name}}</h1> <tr ng-repeat="car in cars"> <td> ...

htmlangularjs

The background image is cropped at both the top and bottom edges

Check out this JSFiddle link: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. The code seems to be running fine, but I'm facing an issue where the image is being slightly cut off at the top and bottom for some reason. -webkit-background-size: cover; Can an ...

htmlcssimage

Optimize HTML outputs in Smarty by reducing the file size

Is there a way to minify all output HTML templates in Smarty automatically? Would it be possible to set something like this: $smarty->minify = true; Additionally, I have come across the {strip} function but using it in every single .tpl file is not fe ...

htmlcompressionsmartyminify

Tips for emphasizing v-list-item on click (Vue)

I am currently working on a side menu that changes based on the selected router model. My goal is to have the selected page highlighted when clicked. I would like this functionality for all the submenus as demonstrated in this example. Below are snippets ...

javascripthtmlcssvue.jsuser-interface

What is the best way to include a validation process for Login Details in case of errors

Is it possible to implement Login Details confirmation for incorrect entries? My desired outcome is that when a user enters their credentials and the userID and Password are correct, but the user type is wrong, upon clicking the login button it should di ...

phphtml

Selenium Webdriver is retrieving background colors with unexpected alpha values

When I need to retrieve the background-color of a WebElement, I typically use the following code: string color = IWebElement.GetCssValue("background-color"); Selenium often returns something like this for the color value: color = "rgba(153, 255, 255, 1) ...

c#cssseleniumselenium-webdriver

"Enhance user interactions: Zooming in on input fields in

Currently, with the latest version of iOS (14.4), there is a zoom effect on any input box that receives focus, unless the input has a font size of 16px without focus. While this may not seem like an issue initially, once focus moves away from the input bo ...

htmlcssios

What is the best way to showcase an image that is being retrieved from PHP using ajax?

I need to show the image that is being received from PHP via ajax. I can display the name <span id="pic_name">Pic name here</span> but how can I display the image as <img src="images/pic/picname" /> //alert(a); $.ajax({ ...

jqueryhtmlajax

The concept of functions in JavaScript: fact or fiction?

Is there a way to show the message "Yes" or "No" based on the return value of a function without directly using the words true and false, and without utilizing alert? Any suggestions would be greatly appreciated. Thank you. function myFunction { if (Ma ...

javascripthtml

failure of svg spinning

I'm currently working with an SVG file and attempting to incorporate a spinning animation similar to loaders and spinners. However, I am facing an issue where the rotating radius is too large and I am struggling to control it effectively. CSS: .image ...

javascripthtmlsvg

The input field within the mat-form has been styled to match the background of the page using CSS

I am currently facing an issue with the code below: Html: <form fxLayout="column" fxLayoutAlign="center center" [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()"> <mat-form-field color="accent" appearance="outline"> <input ...

htmlcssangular-material

Error: content within v-html directive not displaying as expected

The v-html content is not rendering correctly for me. Interestingly, when I remove the v-html in the first list item, it works fine. Take a look at my code below: <div> <br> <li v-html="`a`"> <ul> <li ...

htmlvue.js

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript

html: <input id="myinput" class="cinput" type="image" src="http://www.foodwater.org.au/images/triple-spiral-3-small-button.jpg"/> <br><br><br><br> <button id="s">set to visible class</button> <button id="h"> ...

javascripthtmlcss

Implementing image logout functionality in PHP

Is there a way I can associate an image with the logout link generated by this command? Thank you. <?php echo $login->get_link_logout(); ?> ...

phphtml