Distinguishing between <Strong> and normal text

I would like the text to be aligned to the right, with regular text inside the <p> element also aligned to the right.

After applying this CSS code, the regular text within the <p> element starts writing from right-to-left.

Since I am using SquareSpace, I am unable to modify the DIVs or use the direction: rtl property.

.desc-wrapper strong
{
   color: #000000 !important;
   text-align: left!important;
  font-size: 24px!important;
}

.desc-wrapper p {
   color: #000000 !important;
  text-align: right!important;
  margin-top: -5.7%;
  direction: ltr!important;
}
htmlcss

Answer №1

If you simply want to have normal text float right and <strong> text float left (changing their natural order), you can achieve this with the following CSS:

p {
  float: right;
}
strong {
  float: left;
}

Visit this link for a live demo.

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

It appears that the anchors and fragment identifiers are not functioning as expected

On my page somepage.html, I have the following markup: <div class='someclass' id='hashtag1'> <h1>somecontent</h1> </div> <div class='someclass' id='hashtag2'> <h1>somecontent& ...

htmlanchor

What is the best way to incorporate 2D collision detection for the lower portion of the obstacles in my game design?

When the square ball bounces off the top of the obstacles but goes straight through if coming from the bottom, what adjustments can I make to the collision detection code to check for collisions from the bottom as well? Any help is greatly appreciated. Her ...

javascripthtmlcanvascollision

Extract the date and time information from the API response

I have received a response array from an API that I need to work with. Take a look at the response below: [{createdBy:"user1", updatedDttm: "2022-01-20T07:31:35.544Z"}, {createdBy:"user2", updatedDttm: "2022-02-20T09:31:3 ...

htmlangularjstypescript

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

javascripthtmlcss

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

Incorporate CSS styling within a PHP document

Many individuals are aware that HTML can be embedded within a PHP file. However, can CSS also be included in a PHP file and accessed using <link rel="stylesheet" type="text/css" href="mystyle.php" /> to make it act as a CSS file? While it is possib ...

phphtmlcss

Creative Text Container CSS Styling

Check out this website for the container I want to replicate: container This is the specific textbox: Here's how mine currently appears: I analyzed their css file and examined their html source code. I isolated the section of html and css related t ...

htmlcsstextboxwebkit

Menu remains open on resizing browser, refusing to close

Welcome to my code snippet: HTML: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8> <title>Responsive Menu</title> <!-- CSS and JS link tags go here --> </body> </html> CSS: ...

javascriptjqueryhtmlcssresponsive-design

Is there a way to create a paragraph-style layout in CSS that includes various children elements within a parent div?

I have the following structure currently: However, my desired outcome is: Is there any way to achieve this while keeping the HTML structure the same? Below is an example of the code: .container { display: flex; /* Makes the container an inline blo ...

htmlcssflexbox

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

I am currently working with Bootstrap 4 in React. I have encountered an issue where the card for Item 1 is shorter than that of Item 2, and I would like both cards to have the same height. Additionally, I anticipate adding more cards at the bottom in the ...

cssreactjsbootstrap-4

The content on my website is shown as &#039; instead of '

My PHP script returns a JSON object, and I have a JavaScript function that parses this JSON. I used htmlspecialchars in my PHP code, but when I display the values on my webpage &#039; is not being replaced by '. The same issue occurs with &quo ...

javascriptphphtml

Unresponsive CSS styles on a specific DIV element

Here is the HTML code I am currently working with: <body> <section id="info"> <div class="status"> ... I have been attempting to apply styles to the div with a class of 'status' using my CSS file linke ...

htmlcss

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

Using jQuery to add an attribute to a span element and display an alert message when

I currently have an HTML table set up as shown below: <table id="list" style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr class='thread sele ...

jqueryhtml

Inject external content into a div and expand the accordion

I am currently exploring the process of loading external content into a div, and thereafter expanding an accordion to navigate to specific content within it. To achieve this, I have incorporated the following jQuery code within a click event to load HTML ...

jqueryhtmltwitter-bootstrap

Implementing CSS loading in Vue 3's shadow DOM for nested components

I'm currently working on building an embeddable widget using a custom element with Vue. In order to achieve this, I've created a file called Widget.ce.vue and enabled style loading in the component's shadow root. However, I've run into ...

cssvue.jsvuejs3custom-elementvue3-sfc-loader

Tips for enabling multiple v-list-group components to remain open simultaneously (bypassing the default Vue behavior)

Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to ...

javascripthtmlcssvue.jsvuetify.js

"Implementing Autocomplete feature in jQuery to populate another text box

I'm encountering a strange issue — I want to disable a textbox after using the auto-complete function. To achieve this, I've hidden the correct box and displayed a new one with the same value. The first hidden text box contains the correct dat ...

javascriptjqueryhtml

Navigation in PHP webpages and determining the active page

In my template.php file, I am including navigation.php from a separate page. My goal is to have the current page highlighted with a specific CSS style as I navigate through different pages on my website. I want the active link to be dynamically styled base ...

phphtmlcss

Tab functionality for a hover state

I am working on a component that displays a button and a link when hovered over. This is not a conventional menu, but rather a box located in the center of the page. Considering accessibility guidelines, I want users to be able to tab into the container, ...

cssreactjssassaccessibilityjsx