CODEWITHSUNDEEP
htmlcsscharacter-encodingspecial-characters
Mike
Mike

Reputation: 801

Special character not getting displayed in UI

I have the following effect that is to be added to one of my buttons:

.custom-button:after {
    content: "➜";
    position: absolute;
    opacity: 0;
    top: 14px;
    right: -20px;
    transition: 0.5s;
}

The effects except the the special character are successfully getting applied to my button.

Tried few sites to check that I should try using \279C or &#8594; and to have <meta charset="utf-8"/> defined in my page. Done everything. Nothing seems to work.

Any help on guiding would mean a lot.

UPDATE:

I have a fiddle which is the same code I have used in my project.

Upvotes: 1

Views: 895

Answers (2)

Garrett Manley
Garrett Manley

Reputation: 337

You can find my codepen solution here: https://codepen.io/GarrettManley/pen/GYYoyG

As Mr Lister stated, The solution is to turn the button into a <button>

Here are my modifications to your code from jsfiddle.

<button type="submit" style="border-radius:20px; width:150px; margin-top:25px;" class="btn btn-primary custom-button" onclick="sessionStorage.setItem('fileName','');">Sign In</button>

As far as CSS goes, here is my interpretation of what I think you were going for. I only included the bare minimum here because I wasn't entirely sure what the expected result was.

.custom-button:hover {
  background-color: #219025 !important;
  border-color: #219025 !important;
}

.custom-button:hover::after {
  display: inline;
  padding-left: 8px;
}

.custom-button::after {
  content: '\2192';
  display: none;
}

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46539

When boiled down to the absolute minimum required to demonstrate the problem, your code looks like this:

.custom-button::after {content:'➜';}
<input type="submit" class="custom-button" value="Sign in"/>

but <input> elements don't have content, so they don't have any ::before or ::after content either.

The solution is to turn the button into a <button>, which does have content.

.custom-button::after {content:'➜';}
<button type="submit" class="custom-button">Sign in</button>

Upvotes: 2

Related Questions