Hi there, I need some assistance with a challenge I'm facing.
The issue at hand is related to an element on my webpage, specifically a square with a pseudo-element of :after which creates a pointing arrow. I am trying to access this pseudo-element within my Angular application but encountering an error.
https://i.sstatic.net/qclNR.png
Below is the snippet of my code:
app.component.ts
// Declaring variables and functions
const creativeTechnologyTopBox =
window.getComputedStyle(<HTMLElement>document.querySelector('.about-us_creative-technology_top-box'), ':after');
function mouseEnter(squareName, topBoxName, translatePercentage) {
squareName.style.transition = '0.5s';
topBoxName.style.display = 'block';
squareName.style.zIndex = '1';
squareName.style.width = '100vw';
squareName.style.transform = `translateX(${translatePercentage})`;
}
// Triggering function
creativeTechnology.onmouseenter = function(){
mouseEnter(creativeTechnologySquare, creativeTechnologyTopBox, '0');
};
HTML
<div class="about-us_creative-technology">
<div class="about-us_creative-technology_top-box">
<div class="about-us_creative-technology_h1">
<h1>Creative<br>Technology</h1>
</div>
<ul>
<li>Mobile and Web Application Development</li>
<li>Product Development</li>
<li>Software Development and Management</li>
<li>Architecture and Design</li>
<li>Cloud Management, Strategy and Management</li>
</ul>
</div>
<div class="about-us_creative-technology_square">
</div>
</div>
CSS
.about-us_creative-technology_top-box{
height: 25vw;
position: relative;
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #F2F2F2;
border-width: 25px;
margin-left: -25px;
z-index: 2;
display: none;
}
}
If I console log topBoxName, I receive:
https://i.sstatic.net/MZ2Pv.png
Additionally, when using .getPropertyValue(display), the console displays "none".
I seem to be missing something in my approach, any guidance would be highly valued.
Thank you!