How to Color The Asterix First Character in a P Tag

Change Color of Asterisk inside of a div

That's a lot more complicated than you might think. You'll need to modify your HTML and add some wrapping element like a <span>. You could do something like that:

$("p").each(function() {
    var html = $(this).html().replace(/\*/g, "<span class=\"asterisk\">*</span>");
    $(this).html(html).find(".asterisk").css("color", "red");
});​

Live example

How can I select and style an asterisk in a string?

You need to escape the asterisk, as it also has significance in regex. Use \\*:

Edit: As suggested by @DBS, better to add this check for escaping in the highlight function itself. Code is modified.

jQuery.fn.highlight = function(str, className) {  var escapeRegExp = function(string) {    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string  }  var regex = new RegExp(escapeRegExp(str), "gi");
  return this.each(function() {    this.innerHTML = this.innerHTML.replace(regex, function(matched) {      return "<span class=\"" + className + "\">" + matched + "</span>";    });  });};
$("p").highlight("*", "highlight");$("label").highlight("*", "highlight");

span.highlight {  padding: 5px;  display: inline-block;  color: #F60;}
p {  font-family: Verdana;}
input::placeholder {  color: #F60;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>  Let's *go Zapata let's do it for the revolution, Zapatistas*!!!</p>
<label for="txt">Email* </label><input placeholder="Email*" type="text" id="txt"/>

How to get a red asterisk in a string entry

You can't do that through xml string resources. This can only be done via code. For this you need to use SpannableStringBuilder and ForegroundColorSpan.

---

Here is small example:

TextView text = (TextView)findViewById(R.id.text);

String simple = "Enter your name ";
String colored = "*";
SpannableStringBuilder builder = new SpannableStringBuilder();

builder.append(simple);
int start = builder.length();
builder.append(colored);
int end = builder.length();

builder.setSpan(new ForegroundColorSpan(Color.RED), start, end, 
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

text.setText(builder);

---

Use CSS to automatically add 'required field' asterisk to form inputs

Is that what you had in mind?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {  content:" *";  color: red;}

<label class="required">Name:</label><input type="text">

Adding a red asterisk to required fields

Rather than ::before use ::after and remove the float: right.

::before places a pseudoelement before the element you're selecting. ::after will place it after, so rather than putting the asterisk before the element you want and moving it with a float/position you can just place it after naturally.

The reason the asterisk was moved too far to the right is because floating moves the element to the right side of the parent container (not always the parent element, let me know if you want me to elaborate). So by floating right you were telling it to move to the far right of the label container which means just to the left of the text boxes, and not to the right of the label text.

https://jsfiddle.net/h4depmdf/1/

.required-field::after {
    content: "*";
    color: red;
}

What does an asterisk (*) do in a CSS selector?

It is a wildcard, this means it will select all elements within that portion of the DOM.

For example, if I want apply margin to every element on my entire page you can use:

* {
    margin: 10px;
}

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
    margin: 10px;
}

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

---

Related Topics