What methods are available to modify styles for the before and after pseudo-elements in Angular?

Question

What methods are available to modify styles for the before and after pseudo-elements in Angular?

I'm currently in the process of adding breadcrumb navigation with triangle shapes using before/after elements in CSS, following the method outlined in this tutorial:

http://css-tricks.com/triangle-breadcrumbs/

These are the relevant code snippets:

<ul class="breadcrumb">
        <li><a href="#">Home</a></li>
    </ul>

    .breadcrumb li a {
        color: white;
        text-decoration: none;
        padding: 10px 0 10px 65px;
        background: hsla(34,85%,35%,1);
        position: relative;
        display: block;
        float: left;
    }

    .breadcrumb li a:after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 30px solid hsla(34,85%,35%,1);
        position: absolute;
        top: 50%;
        margin-top: -50px;
        left: 100%;
        z-index: 2;
    }

However, I am hoping to use these breadcrumbs as a directional guide, showing a structure like:

Main_Category >> Sub_Category >> Details

In this flow, the Main_Category is highlighted while the other two parts are darker, and there's a dropdown menu available for selection. Upon selection, Sub_Category will be highlighted and another dropdown will appear.

My main query is how can I modify the colors of the before/after borders, since they are pseudo-elements?

Based on the tutorial, I believe I can adjust the color in the main section like this:

<li><a href="#" ng-style="background: {{color}}">Home</a></li>

Nevertheless, I haven't found a way to set ng-style for the before/after elements, resulting in unchanged colors for the triangles.

javascript jquery html css angularjs

Answer 1

Answer №1

If you're looking to dynamically style the before/after pseudo-tags using an angular directive, here's how you can do it:

Instead of relying on ng-style, utilize ng-class to add a class that will determine which before/after pseudo class should be applied.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

Then in your CSS:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}

Answer 2

If you're looking to dynamically style the before/after pseudo-tags using an angular directive, here's how you can do it:

Instead of relying on ng-style, utilize ng-class to add a class that will determine which before/after pseudo class should be applied.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

Then in your CSS:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}

Answer 3

Answer №2

Unlike other solutions, this method allows you to customize elements based on controller variable values.

By using a @HostBinding, you can set CSS variables that can be easily accessed in your .scss file, making it simple to dynamically style :before and :after elements.

.ts:

size = 10
padding = 2

@HostBinding('attr.style')
public get cssVars() {
  return `
    --switch-size: ${this.size};
    --switch-padding: ${this.padding};
    --switch-size-inner: ${this.size - this.padding * 2};
  `;
}

.scss:

.my-class:before {
  height: calc(var(--switch-size) * 1px);
}

Please note: While some suggest using DomSanitizer with this method, I found it unnecessary as it worked without it - see

Answer 4

Unlike other solutions, this method allows you to customize elements based on controller variable values.

By using a @HostBinding, you can set CSS variables that can be easily accessed in your .scss file, making it simple to dynamically style :before and :after elements.

.ts:

size = 10
padding = 2

@HostBinding('attr.style')
public get cssVars() {
  return `
    --switch-size: ${this.size};
    --switch-padding: ${this.padding};
    --switch-size-inner: ${this.size - this.padding * 2};
  `;
}

.scss:

.my-class:before {
  height: calc(var(--switch-size) * 1px);
}

Please note: While some suggest using DomSanitizer with this method, I found it unnecessary as it worked without it - see

Answer 5

Answer №3

For this particular scenario, I recommend steering clear of using ng-style and opt for ng-class instead. By utilizing ng-class, you can assign different classes based on conditions, thus maintaining all your CSS in a centralized location without the need to override styles in the HTML.

To implement this change, simply adjust your code to:

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

In this snippet, ensure that subCategory is a boolean value. When subCategory is set upon clicking, the breadcrumb-color class will be dynamically added, resulting in output similar to the following:

<li><a href="#" class="breadcrumb-color">Home</a></li>

Here are some example CSS rules for inspiration, allowing you to customize the appearance as desired:

.breadcrumb-color li a {
    background: red;
}

.breadcrumb-color li a:after { 
    background: red;
}

Answer 6

For this particular scenario, I recommend steering clear of using ng-style and opt for ng-class instead. By utilizing ng-class, you can assign different classes based on conditions, thus maintaining all your CSS in a centralized location without the need to override styles in the HTML.

To implement this change, simply adjust your code to:

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

In this snippet, ensure that subCategory is a boolean value. When subCategory is set upon clicking, the breadcrumb-color class will be dynamically added, resulting in output similar to the following:

<li><a href="#" class="breadcrumb-color">Home</a></li>

Here are some example CSS rules for inspiration, allowing you to customize the appearance as desired:

.breadcrumb-color li a {
    background: red;
}

.breadcrumb-color li a:after { 
    background: red;
}

Answer 7

Answer №4

If you need to apply different styles dynamically in AngularJS, ng-class is the way to go.

 <li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

For more information and a sample code example, please refer to this link.

Answer 8

If you need to apply different styles dynamically in AngularJS, ng-class is the way to go.

 <li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

For more information and a sample code example, please refer to this link.

What methods are available to modify styles for the before and after pseudo-elements in Angular?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Set up an array data by extracting values from an array prop within a Vue component

What steps should be taken to link a frontend program on a separate port to a backend system?

Chrome functions properly, while Firefox throws a TypeError stating that document.getElementById(...) is null

Any suggestions on how to secure my socket connection following user authentication in redux?

Guidelines for integrating NPM modules into a vanilla JavaScript and HTML endeavor

Implement a loader in AngularJS to display when transitioning between pages

Guide to showcasing object characteristics inside an object in Angular2

Leveraging props in React to retrieve information from MongoDB and incorporate it into a component

Firestore implementing batching for realtime updates with the onSnapshot 'IN' condition

The issue with 'DemoCtrl' defined in Angular JS is that it does not correspond to a valid argument

Angular is failing to bind properly

What is the best way to group Angular $http.get() requests for efficiency?

pictures showcased in a grid that dance and sway

Repairing my CSS with jQuery fullpage.js

Error encountered while executing the yarn install command: ENOTFOUND on registry.yarnpkg.com

Unlocking the potential: Clicking on all ng-if elements with matching text using Chrome console

Is Express capable of serving static files from a hidden folder with dot file?

Even though all criteria are met, I still cannot assign a value to the property following the application of the filter method

Repeated firing of jQuery's Ajaxstop within a click event

Using CSS to align and place elements