CSS :after pseudo selector is not working on a listview item

Question

Hello.

I'm trying to use the following css to create a hexagon shape for my list items in a listview. The :before is working, but the :after is not. Any suggestions are appreciated. See the screen shot to see how it is rendering.

   .homepage .item:before {
        content: " ";
        width: 0; height: 0;
        border-bottom: 30px solid #6C6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
        ;
        top: -30px;
    }
    .homepage .item {
        margin-top: 30px;
	height: 60px;
	width: 104px;
        background-color: #6C6;
        ;
    }

    .homepage .item:after {
        content: " ";
        width: 0;
        ;
        bottom: -30px;
        border-top: 30px solid #6C6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
    }

Answer 1

Hi Christine,

Could you provide more code with us, i cannot use your CSS for reproduce.

I did not use any ListView in WinJS, but I simply use a div instead, I cannot see the same result as your image.

Is there something I missed?

--James

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 2

Hi James.

Yes, your html is missing the listview. Basically, take the Grid project template Windows 8 Store app and apply the CSS that I provided. Of course you will need more than just the below html since the grouping, etc of the listview depends on the javascript, etc that is in this project template.

    <div class="fragment groupeditemspage">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Grid</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="groupeditemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
                    layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},
                    selectionMode: 'none',
                    currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
                    groupDataSource: Data.groups.dataSource,
                    groupHeaderTemplate: select('.headertemplate'),
                    itemDataSource: Data.items.dataSource,
                    itemTemplate: select('.itemtemplate'),
                    ongroupheaderinvoked: select('.pagecontrol').winControl.groupHeaderInvoked,
                    oniteminvoked: select('.pagecontrol').winControl.itemInvoked
                }">
            </div>
        </section>
    </div>

Answer 3

See my screenshot, everything should be more clear. After I change the background color of item div, also modify the position attributes for "after" and "before", you can see actually "after" is not gone, but just hide by item.

As I think the best solution for you to modify your code as below, add a itemContainer div outside the item div for display the "after" and "before" elements.

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
		<div class="itemContainer">
			<div class="item">
				<div class="item-overlay">
					<h4 class="item-title" data-win-bind="textContent: title"></h4>
					<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
				</div>
			</div>
		</div>
    </div>

And then apply the new CSS to your HTML:

.item:before {
        content: " ";
        width: 0; height: 0;
        border-bottom: 30px solid #6C6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
        ;
        top: 30px;
    }
	.itemContainer
	{
		margin-top: 60px;
	height: 60px;
	width: 104px;
        
        overflow:visible;
		}
     .item {
       height:30px; 
	   background-color: blue;
    }

	    .item:after {
        ;
        top: 90px;
        content: " ";
        width: 0;
        
        bottom: -30px;
        border-top: 30px solid #6C6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
    }

The result looks better:

--James

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.