Simulate external stroke ::before pseudo elements: problem with transparent text

Asked
Active3 hr before
Viewed126 times

6 Answers

simulateexternal
90%

Here is an idea where you can consider mix-blend-mode and a combination of text-shadow to approximate this. The tricky part is to adjust the shadow in case you want a bigger stroke: ,We do have -webkit-text-stroke but for some odd reason the stroke is centred around the border of the text rather than outside it, as bemoaned here.,Connect and share knowledge within a single location that is structured and easy to search.,Please be sure to answer the question. Provide details and share your research!

.text > span {
      font - family: sans - serif;
      font - size: 60 px;
      font - weight: bold;
      color: #fff; /*use white*/
      /*create the stroke around text*/
      text - shadow:
         2 px 0 0 px #000,
    0 2px 0px # 000,
         2 px 2 px 0 px #000,
    -2px 0 0px # 000,
         0 - 2 px 0 px #000,
    -2px -2px 0px # 000,
         -2 px 2 px 0 px #000,
    2px -2px 0px # 000;
      mix - blend - mode: darken; /*everything is more dark than white so we always see the background */
   }
   .text {
      display: inline - block;
      padding: 20 px;
      background: linear - gradient(to right, red, blue);
   }
<div class="text"><span>Some text here</span></div>
load more v
88%

I find it difficult to believe that there is no standard and simple (and browser-independent) way to put a stroke effect around the outside of text using CSS. ,If you want a transparent color for the text you can duplicate it using pseudo element:,So I'm trying to implement a workaround based on this idea, which places the stroked text in a pseudo element behind the original un-stroked text. I've demonstrated this in this jsfiddle, with the following code:,We do have -webkit-text-stroke but for some odd reason the stroke is centred around the border of the text rather than outside it, as bemoaned here.

var jQueryAttr = function(selector, attr, setterFunction) {
   document.querySelectorAll(selector).forEach((el, i) => {
      el.setAttribute(attr, setterFunction.call(el, i, attr));
   });
};

jQueryAttr('.myclass', 'data-myclass', function(index, attr) {
   return this.innerHTML;
});
body {
   background: none;
}

.basic {
   color: rgba(186, 218, 85, 1);
   font: 2.5 em Georgia,
   serif;
}

.myclass {
   position: relative;
   background: transparent;
   z - index: 0;
}

.myclass::before {
      content: attr(data - myclass);
      position: absolute; -
      webkit - text - stroke: 0.2 em rgba(0, 0, 0, 1);
      z - index: -1;
   }

   .anotherclass {
      -webkit - text - stroke: 0.2 em rgba(0, 0, 0, 1);
   }
<p class="basic">Text without any stroke</p>
<p class="myclass basic">Text with outer stroke</p>
<p class="anotherclass basic">Without the trick applied</p>
load more v
72%

4.1 Generated Content Pseudo-elements: ::before and ::after ,4.1. Generated Content Pseudo-elements: ::before and ::after ,4.1. Generated Content Pseudo-elements: ::before and ::after ,4.1. Generated Content Pseudo-elements: ::before and ::after (2)

p::first - line {
   text - transform: uppercase
}
load more v
65%

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:,Would anyone use :before or :after in the tag to generate a page header & footer? Is this semantically correct to apply a pseudo element to the tag?,You want the generated content to come before the element content, positionally.,Pure CSS my friend! The ribbon’s folded corners make use of ::before and ::after pseudo elements.

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::before {
   content: "before";
}
div::after {
   content: "after";
}
<div>
   before
   <!-- Rest of stuff inside the div -->
   after
</div>

Note that you cannot insert HTML (at least, that will be rendered as HTML).

content: "<h1>nope</h1>";
load more v
75%

We can style text or images in the content property almost any way we want.,In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.,One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.,Note: CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.

/* Add a heart before links */
a::before {
   content: "♥";
}
load more v
40%

Added a mechanism to regenerate text in an image element when it changes dimensions (r278747),Animated pseudo element style resolved against wrong parent style (r275277),Changed animations to run accelerated even if other animations targeting the same element are not accelerated,Resolved ::before and ::after pseudo elements during style resolution

Domain-bound codes. On macOS Big Sur, added support to Security Code AutoFill for domain-bound, one-time codes sent over SMS; in the following 2FA SMS, Safari only offers to fill the code on example.com, and no other domain.

Your Example code is 123446.

@example.com #123446