Check out this JSFiddle I have:
https://jsfiddle.net/6cu295sn/1/
new Vue({
el: '#cct',
lang: {
myText: "my text is",
}
});
.myCSS::after{
content: {{lang.myText}}; //this does not output anything
}
I'm looking for a way to pass the dynamic value from Vue.js to the CSS content property. Any suggestions on how to achieve this?
To use a CSS variable in the content of your pseudo class, you can bind it as shown below:
new Vue({
el: '#cct',
data () {
return {
lang: "this is my custom text"
}
}
}).myCSS {
margin: 1rem 0;
border: 1px solid black;
}
.myCSS::after {
content: var(--myText);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="cct">
<input v-model="lang">
<div class="myCSS" :style="`--myText: '${lang}'`"></div>
</div>I am facing an issue where clicking on the button does not add any records. However, when I include @keyup.enter="addusers" in the input field, it works when I press enter. Is there a way to make it work with the Add button instead? Any advice ...
http://jsfiddle.net/58arV/ Trying to create a question component where users can choose the correct answer out of 4 options. I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a c ...
On a webpage, there are three columns: left, middle, and right. Only the left column is set to position:fixed, while the others are normal. When vertically scrolling, the left column should remain fixed while the other two scroll. However, when the brows ...
I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand? CSS Below is the CSS code rele ...
I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...
Could you assist me in resolving this issue : When accessing a value from the props within the root scope of <script setup>, reactivity is lost (vue/no-setup-props-destructure) The technologies I am using include : nuxt: "^3.6.5" typescri ...
Hey there! I'm trying to set up a form with two equal columns using the HTML and CSS3 code below. However, it seems like something is causing the second label "upto" to be positioned in the right corner. Please refer to the attached screenshot for mor ...
Here is the code I have written: <!doctype html> <html lang="en"> <head> <title>Testing form input</title> <style type="text/css></style> <script type="text/javascript" src="validation.js"></script> &l ...
Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...
I have been experimenting with different versions of this code in an attempt to modify a specific element for a coding challenge, but none of them seem to successfully change multiple styling properties of the element upon clicking on a button. Would great ...
I am currently working on incorporating the Material-UI Autocomplete component, and my goal is to have each option label show an icon along with some text. The challenge I'm facing is that I only want the popper element to be the width of the text inp ...
I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...
Having trouble centering a div inside a 100% wide container. Here is the HTML code: <div id="body-outside"> <div id="body-inside"> content </div> </div> And here is the CSS: #body-outside{ width:100%; flo ...
Currently, I am in the process of designing a straightforward two-column layout. This layout will consist of one prominent image at the top followed by two columns underneath - one for images and the other for text. https://i.sstatic.net/sYphQ.png Howeve ...
Hey there! I've been running into an issue while trying to count the length of notifications using vue.js and Laravel. Every time I do this, I get an error saying "Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined" ...
My goal is to utilize the bootstrap style for a fixed navigation bar at the top of the page. By using navbar-fixed-top, I can fix an element to the top. The visibility of #subnav will be determined by the value of showsubnav. <div id="backnav"> ...
<form method="POST" @submit.prevent="share" > <div id="imgs"> Select Images: <input type="file" ref="file" name="file[]" multiple ></form& ...
Is there a difference in how stylesheets are loaded via the link tag - asynchronously or synchronously? In my design, I have two stylesheets: mura.css and typography.css. They are loaded within the head section of the page, with typography.css being load ...
My objective with this card animation is for the cards to expand in size when hovered over. Unfortunately, the current issue is that when one card is hovered over, all the other cards also expand, which is not the intended behavior. I am seeking a solution ...
Currently, I am working on a project that combines a RESTful Java backend with a Vue SPA front-end. In my quest for user authentication solutions, I stumbled upon JWT tokens and decided to implement them into the system somewhat hastily. However, after a ...