Why I have space between anchor tag and span inside
The issue is in your code, elementMyAccountText
class have position: absolute;
.
If you want to display TEXT
in left align with the center of the box then You can use display: flex
to the ul
and li
and align-items: center;
to the li
.
If you want full box clickable then
Remove height
from elementMyAccount
class and add below code
ul li a{
width: 100%;
display: block;
padding: 20px 0;
}
.listElementMyAccount { margin-top: 50px;}
.listElementMyAccount ul { margin-left: -8px; display: flex;}
.elementMyAccount { border-radius: 7px; border: 1px solid black; height: 60px; width: 240px; margin-left: 8px; margin-top: 8px; display: flex; align-items: center;}
/*.elementMyAccountText{ font-size: 15px; position: absolute; margin-left : 5px; line-height:60px; width:240px; height:60px;
}*/
.elementMyAccountImg { margin-left: 5px; opacity: 0.75; margin-right: 10px; vertical-align: middle;}
.adressDescription { display: block; position: absolute; font-size: 11px; text-decoration: none; line-height: 15px; display: block;}
<div class="listElementMyAccount"> <ul>
<li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT1 </a> </li> <li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT2 </a> </li> <li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT3 </a> </li> <li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT4 <span class="adressDescription" >(text4)</span> </a> </li>
</ul>
</div>
Is a span tag with a href attribute considered valid?
Well, that is pretty clear…
But if you want it to behave like a link, you can wrap it in an anchor tag, such as
<a href="http://www.example.com"><span>My span is a link !</span></a>
Absolute anchor tag vs anchor tag with absolute span
From an accessibility perspective, the main difference I could pick up between using an absolute anchor tag versus using an absolute span tag is the visible focus rectangle that appears when either element has focus.
For the absolute anchor card, the visible focus rectangle covers the entire card:
For the absolute span card, the visible focus rectangle doesn't appear (Chrome), or is very small (Firefox):
It's a requirement to have a visible focus rectangle for an element that has focus in order to satisfy WCAG 2 (see guideline 2.4.7: Focus Visible).
I tested both card examples with JAWS 2022 and it correctly announced the link in either case.
On a side note, the colour contrast ratio of the blue link text against the green background is too low to satisfy WCAG 2, so you'll need to increase the contrast ratio to at least 4.5:1 to make it accessible. I'm sure it's just that way right now for the example but thought it's worth a mention since you're asking about accessibility.
Remove underline on span in anchor tag
You need to add display:inline-block
to span
.link { text-decoration: none;}
.link:hover { text-decoration: underline;}
.link:hover .inside-text{ text-decoration: none; display:inline-block;}
<a href="#" class="link">Hi <span class="inside-text">there</span> dude.</a>
Add span inside anchor output using PHP's ob_get_contents function
try,
wp_logout_url ( string $redirect = '' )
function instead of wp_loginout('index.php')
example,
ob_start();
wp_logout_url('index.php');
$logoutlink= ob_get_contents();
ob_end_clean();
$items .= '<a href="'.$logoutlink.'"'><span></span></a>;
use is_user_logged_in()
to check weather user logged in or not.
ob_start();
if (is_user_logged_in()) {
wp_logout_url('index.php');
} else {
site_url('index.php')
}
Related Topics
Vertically Center Text in a 100% Height Div
Fixed Positioning/Z-Index Issue in Mobile Safari
Bootstrap 4 Collapsing Two Navbars into One Toggle Button
Why Are Horizontal Scroll Bars Shown on My Website
Is It Safe to Use Anchor to Submit Form
CSS Vertically Align Floating Divs
How to Prevent Div Tag Starting a New Line
CSS Flexbox | Reordering Elements in Mobile
Radio/Checkbox Alignment in HTML/CSS
How to Calc() The Number of Rows in a Grid Template
How to Test a Website for Retina on Windows Without an Actual Retina Display
How to Change Font in Ipython Notebook