Using Pseudo-elements

When targeting an element with a selector, pseudo-elements enable styling its content in a more advanced way by letting you pick only specific content parts or even create new elements inside the selected one.

In CSS, a pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements.

A pseudo-element consists of a double colon ( :: ), which distinguishes it from the pseudo-class, followed by its name:

::pseudo-element

You can use only one pseudo-element in a single selector. The pseudo-element must appear after all the other components and pseudo-classes.

The element that a pseudo-element is attached to is defined as an anchor element. A full CSS rule using pseudo-selector looks like this:

selector::pseudo-element {
    property: value;
}

A selector can contain only pseudo-elements without an anchor element. In this case, the rule will apply to any element, as if you used * (select all elements) selector before them.

Here is the three most usable from the perspective of working with Iotellect web components:

Browsers support the single colon ( : ) syntax for the original four pseudo-elements: :before, :after, :first-line, and :first-letter.

The list of currently available CSS pseudo-elements are regulated by W3C CSS Specifications and can be found at various open resources such as W3C Community Wiki.

Working on a UI, sometimes it is convenient to create additional elements from thin air with CSS instead of adding more components to the dashboard. This may be used for purely decoration purposes, or to provide an additional bit of information to a user. 

CSS rules for ::before and ::after pseudo-elements can use the content: '<value>'; property, which replaces an element with a generated value. The possible values of this property for these two pseudo-elements are:

As an example, let’s add to a Label component something that can be used as a status indicator. This approach eliminates the necessity of adding a separate UI component to the dashboard in the pretty common use case.

1. In the UI Builder, add the component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

3. In the Properties Editor, switch to the Element Style tab.

4. In the Element Style tab, add the rule to the Element CSS Style property:

width: fit-content;
margin: auto;
color: dimgrey;
font-size: 24px;
font-weight: 500;

::before {
  content:'';
  display: inline-block;
  margin: 0 8px 2px 0;
  width: 12px;
  height: 12px;  
  border-radius: 50%;
  background-color: limegreen;
}

5. Added element appears on the dashboard before the Label content once the field is out of focus, expanding the component size.

Now you have a static indicator body, so you may update its appearance with Bindings:

• by updating directly the Element CSS Style property;

• by changing the component’s Custom Classes property on a condition while having all styles assigned to the classes beforehand.

Have a glance at other possible binding applications in the Style Properties and Bindings article.

In the case of using ::before and ::after pseudo-elements you are effectively adding new HTML items to the DOM, so it may affect the markup of both the component and the dashboard itself. If you want to apply these pseudo-elements without occasionally rearranging the existing layout, you need to add them out of the normal document flow.

Document flow is the arrangement of page elements as defined by positioning statements. It is how the different elements take up space and arrange themselves around each other.

To achieve this, use the position CSS property with the absolute, fixed or sticky value for the pseudo-element and then define its exact position relative to the selector target.

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

For the absolute position the element's precise location defined with the top, right, bottom, and left properties is calculated relative to the closest positioned (non-static) ancestor, which is the component’s Container.

Consider the case when you want to add an overlaying block with additional information to a specific element inside a component. For this example, let’s add a hint to a Carousel component’s slide switcher. Just adding an in-flow pseudo-element won’t do the trick as it will affect the surrounding markup.

1. In the UI Builder, add the component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

2. Hover over it on the layout with the cursor and click the () Add Items button in the top-right corner of the appeared overlay to add an extra slide. It will make a slide switcher appear.

3. Open the component Properties Editor by clicking the () Configure button next to the previous one in the top-right corner of the overlay, or by selecting it in the Component Tree.

4. In the Properties Editor, switch to the Container Properties tab.

5. Using the browser Developer Tools, figure out that the slide switcher is a <ul> element with class="slick-dots slick-dots-bottom dots-container carousel0" inside the component’s container.

6. In the Container Properties tab, add the rule to the Container Style property:

.slick-dots::after {
  content: 'Switch the slides by clicking on the elements below';
  padding: 8px 16px;
  border-radius: 16px;
  color: white;
  text-align: center;
  background-color: black;
  z-index: 1;
}

7. The added element appears on the dashboard after the slide switcher once the field is out of focus, but it moves the switcher out of its place as the element now takes more space in the markup.

8. Add two more CSS properties to the rule:

.slick-dots::after{
  content: 'Switch the slides by clicking on the elements below';
  position: absolute; /* remove the element from the document flow */
  bottom: 16px; /* set its absolute position */
  padding: 8px 16px;
  border-radius: 16px;
  color: white;
  text-align: center;
  background-color: black;
  z-index: 1;
}

9. Now the pseudo-element is out of the normal document flow and doesn’t interfere with the markup.

If you want your added pseudo-elements to float outside the component’s container on the layout, try setting its Content Overflow property in the Container Properties group to Visible. Note that this may cause other component’s content that is hidden by the same boundaries to also become visible.

Was this page helpful?

Tell us more

Send

Thank you!