Ways to alter the color of individual pseudo elements using a CSS loop

While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation?

I have included the code on Codepen for reference.

https://codepen.io/matadantelinga/pen/ExQeqjj

I am particularly curious if it's feasible for each ::after element containing text to have its own unique color.

Additionally, I have used Angular Ionic for developing this project. Any advice or suggestions would be greatly appreciated. Thank you!

htmlcssangularcss-animations

Answer №1

While I am not familiar with how to achieve this with CSS, I believe using JavaScript would be the best approach. You can set an interval that adds a character to your string every X milliseconds with a randomly chosen color (or a color selected from an array).

To randomize a color: Check out this random color generator

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

Enhance the appearance of a dropdown selection using CSS

I am interested in customizing the appearance of the first option (Search Clubs) to be bold, while keeping the rest with normal font weight. Currently, I am able to make the first option bold, but it only appears that way after clicking the dropdown menu ...

cssdrop-down-menu

Encountering a problem with AJAX displaying error code 80020101 while attempting to retrieve a string from a

I encountered an error while running my code: Microsoft JScript runtime error: Could not complete the operation due to error 80020101. I came across this thread on Stackoverflow that talks about a similar issue: Ajax request problem: error 80020101 var d ...

jqueryasp.nethtmlajax

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

jqueryhtmlcssscroll

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

Beginning of my HTML page, initializing a dialog : <script type="text/javascript"> $(function() { $( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: true, height:180, width:300, modal: true, buttons: { "Yes": ...

javascriptjqueryhtmljquery-uidialog

The issue of the mat-select change event failing to trigger in an Angular 13 reactive form when using the

How to use mat-select within a form-group <mat-form-field appearance="outline"> <mat-select formControlName="formula" id="formula"> <mat-option [value]="metricFormula.TotalCount">{{l(&apos ...

angularangular-materialangular-material2angular-material-6angular-material-5

Angular 2 feature that allows for a single list value to be toggled with the

Currently, my form is connected to a C# API that displays a list of entries. I am trying to implement a feature where two out of three fields can be edited for each line by clicking a button that toggles between Yes and No. When the button is clicked, it s ...

angulartypescript

How can Angular be used to create core styles in a CSS file rather than adding them dynamically within style tags?

Whenever I import a component, like MatTabsModule, it automatically generates styles within the head section: <style>.mdc-tab{min-width:90px;padding-right:24px....</style> I'd prefer to have all these styles generated in an external CSS f ...

angular

The website shifts as you navigate to a new page

Could use some insight on an issue with my website . Whenever I navigate to a different page, like the "Rules" page from the main site, the container seems to shift down slightly. Any ideas on what could be causing this? I've been struggling to pinpoi ...

phphtmlcss

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

htmlcss

Transitioning the width in CSS without using the "auto"

Currently, I am experiencing a problem with my CSS animation that is leaping directly from the start to finish. It appears to be connected to a similar issue addressed in this thread. My inquiry is: Is there a way to create a smooth transition in width f ...

csswidthcss-transitions

Using XML in Angular for POST requests

I am currently working with Angular (not AngularJS) and have a web service that uses SOAP to interact with XML data. Although I've searched extensively, I haven't been able to find a comprehensive example of a POST request using XML. If anyone ...

angularxml-parsingxmlhttprequesthttp-postangular2-http

How can I center an image in HTML while maintaining a slight margin at the bottom

I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...

htmlcssimagemargin

What is the best way to restrict a link to only a specific div element and not a Bootstrap

My HTML conundrum involves a div styled with the class .win_box: This particular div is nested within a Bootstrap column, and the link associated with it extends throughout the entirety of said column. However, I want to restrict user access to this link ...

htmlhyperlink

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss

Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png However, the only result I can achieve with CSS looks like this: https://i.sstatic.net/TWrSR.png I could use divs in HTML and add th ...

htmlcss

Storing checkbox status in Angular 7 with local storage

I am looking for a way to keep checkboxes checked even after the page is refreshed. My current approach involves storing the checked values in local storage, but I am unsure of how to maintain the checkbox status in angular 7 .html <div *ngFor="let i ...

htmlangulartypescript

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

I am having difficulties invoking jQuery functions within an "asp:UpdatePanel". Despite the code provided below, my attempts to add a class to the div element ".popup-body" are unsuccessful. Interestingly, the "alert();" function works without any issues. ...

javascriptjqueryhtmlasp.net

Retrieving a global variable within a nested function

I am encountering a scope issue with my nested function while trying to pass two global variables. I need some help as I keep getting this error when running the code: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'use ...

angulartypescript

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

cssbackground-color

Adding variables to a div using jquery

Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...

javascriptjqueryhtmlcssfrontend