Wikimarkup signatures aren't very semantically written, they should be in a parent wrapper with some classes so it's easier by default to read via code and also more customizable. Have some more custom data-* attributes too just in case. (Added the data-signature-username and data-timezone, the data-userpage-link and data-usertalkpage-link was added by default via the MediaWiki core, the title attribute pre-existed too).
Syntax
<span class="signature" data-signature-username="Username"> <a class="signature-username" href="/wiki/User:Username" title="User:Username"data-userpage-link="true">Username</a> <a class="signature-talkpage" href="/wiki/User_talk:Username" title="User talk:Username" data-usertalkpage-link="true">talk</a> <time class="signature-datetime" datetime="yyyy-mm-dd hh:mm" data-signature-timezone="timezone">hh:mm, d m yyy (timezone)</time> </span>
Examples
<span class="signature" data-signature-username="Codynguyen1116"> <a class="signature-username" href="wiki/User:Codynguyen1116" title="User:Codynguyen1116" data-userpage-link="true">Codynguyen1116</a> <a class="signature-talkpage" href="wiki/User_talk:Codynguyen1116" title="User_talk:Codynguyen1116" data-usertalkpage-link="true">talk</a> <time class="signature-datetime" datetime="2016-04-17 00:26" data-signature-timezone="UTC">00:30, 17 April 2016 (UTC)</time> </span>
The parentheses don't really count as "content", so they can be added with the ::before and ::after psuedo-selectors in CSS on the .signature-talkpage class.
( *Notice that double colons were used since browser support for IE8 with the MediaWiki core has dropped. :before, :after are for this reason not used.* )
.signature-talkpage::before {
content: '(';
}
.signature-talkpage::after {
content: ')';
}References: