No underline on link

Report · Nov 08, 2017

I still don't understand half of this, so bare with me.

Several paragraphs have hyperlinks on the text. White background, black text, blue hyperlink.

Got an 'article' so i can have a coloured box with white text. This text needs to be a link. If i just make it into a link, it colours it the blue that the box background is (main colour across design). Found a way to have the text white.

what i would also like is for this text (not the others) to NOT have an underline. However through my internet search, it says i should add 'text-decoration: none'. But when i add that in after - style="color:white" - it has no effect.

What am i doing wrong?

Report · Nov 08, 2017

well I can't reproduce your trouble... here is a video demonstrating the point

11.08.2017-11.33.36

Report · Nov 08, 2017

that helped thanks

I copied what you had written. I had a space and too many speech marks.

I assume it is suppose to be - style="everything to do with style"

what i was doing was - style="color:white" text-decoration: "none"

Report · Nov 08, 2017

yes every description must be include in between the double quote sign... et separated by a semicolon.

an other approach will be to link a style sheet to your HTML document and then you'll have two way for creating the appropriate rule, at least the selector to it

1 - if you don't have access to the core content of the DOM, and so to the HTML, the solution will be to play with tags selector... so that do mean that all the paragraph, inlcuded in within an anchor tag, will have the text decoration removed

that give the following rule to add to your style sheet

a p {

text-decoration:none;

}

but that way all the paragraph include in an anchor (how deep it is) will be affected... to reduce it, you could precise, only the paragraph present in the first level of an anchor, that will add the > sign in between a and p

a > p {

text-decoration:none;

}

2 - if you have access to the DOM and can add class to each appropriate element... you could create a class and add it as attribute to the appropriate paragraph... the name of your class can be what ever you want, but it also can be in a BEM approach (see BEM infos - BEM — Block Element Modifier )

and the rule to add to the style sheet will be

.article--linked {

text-decoration:none;

}

Now from there, you can add all the needed description, color, margin, padding, font and so on... to each rule as you like

Report · Nov 08, 2017

Why are you using inline CSS styles? Ideally, your styles should be in an external CSS file to which all site pages are linked.

/**GLOBAL LINK STYLES**/

a {text-decoration: none}

a:link {color: blue}

a:visited {color: black}

a:hover,

a:active,

a:focus {text-decoration:underline}

The exception to this is if you're creating HTML Emails. Even so, the CSS above can be wrapped in <styles> tags within your <body> tag.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 08, 2017

it seams that the initial question was targeting a specific type of link of an article... not all the anchor.. that wahat said the author (not others)

so if the rule selector is A it will target all the anchor don't you think ?

Report · Nov 08, 2017

In that case we should target that selector and pseudo-class in the global CSS.

/**ALL LINKS INSIDE THE ARTICLE TAG**/

article a {color:white}

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 08, 2017

what do you mean by pseudo class ???

anyway, the author asked to target all the text of the article and not just sporadic links inside it... that why I've answered that way in my first message

but I feel like beeing transparent on it arf arf...

breathing some cool air is often a need when spending too much time in front of a screen ... arf arf

Report · Nov 08, 2017

https://forums.adobe.com/people/B+i+r+n+o+u wrote
what do you mean by pseudo class ???

Any selector preceded by a colon : is a pseudo-class.

Meet the Pseudo Class Selectors | CSS-Tricks

https://forums.adobe.com/people/B+i+r+n+o+u wrote
anyway, the author asked to target all the text of the article and not just sporadic links inside it...

I see. Well, that's not the meaning I got from it.

OP said: This [article] text needs to be a link but not blue like the background.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 08, 2017

thanks for the link to pseudo class...

the point is that my question was about what do you mean by pseudo class, the question was about the text decoration... once applied on the main element, the new declaration will also affect the different states of this element... so my question ?

Concerning the interpretation of the question, your English is far better than mine. I thought I understood that the link should affect the whole paragraph. Hence my link proposal wrapping the paragraph

but it seems that you have not seen my answer

Adobe Community

No underline on link

1 Correct answer